Theo's Typesafe CultTTC
Theo's Typesafe Cult•17mo ago
tmonaco

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,
      }
    ];
  },
};


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,
      }
    ];
  },
};


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
Was this page helpful?