Theo's Typesafe Cult•2mo ago

Redirects in next.config.js - App Router - NextJS 14

Hi guys, I was wondering how can I make a redirect with a nagavite lookahead in the slug. Let's say I have these two routes: - /blog/new - /blog/:id/overview What I want to do is, if you input in the URL /blog/:id I want to redirect the user to /blog/:id/overview. The problem is that if I include this in the next.config.js I cannot navigate to /blog/new because new is being inferred as the slug.

const nextConfig = {
  async redirects() {
    return [
      {
        source: "/blog/:id",
        destination: "/blog/:id/overview",
        permanent: true,
      }
    ];
  },
};

const nextConfig = {
  async redirects() {
    return [
      {
        source: "/blog/:id",
        destination: "/blog/:id/overview",
        permanent: true,
      }
    ];
  },
};

I tried to use this regex in the slug, but it didn't work...

const nextConfig = {
  async redirects() {
    return [
      {
        source: "/blog/:id(^(?!new$).*)",
        destination: "/blog/:id/overview",
        permanent: true,
      }
    ];
  },
};

const nextConfig = {
  async redirects() {
    return [
      {
        source: "/blog/:id(^(?!new$).*)",
        destination: "/blog/:id/overview",
        permanent: true,
      }
    ];
  },
};

Any idea of how can I achieve this or if there is a better way of doing it? Also this is my file tree:

blog/
├── [id]/
│   └── overview/
│       └── page.tsx
└── new/
    └── page.tsx

blog/
├── [id]/
│   └── overview/
│       └── page.tsx
└── new/
    └── page.tsx

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Redirects in next.config.js - App Router - NextJS 14