1 reply

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/new

/blog/:id/overview

/blog/:id/overview

What I want to do is, if you input in the URL

/blog/:id

/blog/:id

I want to redirect the user to

/blog/:id/overview

/blog/:id/overview

.

The problem is that if I include this in the

next.config.js

next.config.js

I cannot navigate to

/blog/new

/blog/new

because

new

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

TTC

Theo's Typesafe Cult•2y ago•

1 reply

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/new

/blog/:id/overview

/blog/:id/overview

What I want to do is, if you input in the URL

/blog/:id

/blog/:id

I want to redirect the user to

/blog/:id/overview

/blog/:id/overview

.

The problem is that if I include this in the

next.config.js

next.config.js

I cannot navigate to

/blog/new

/blog/new

because

new

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads