CODEWITHSUNDEEP
next.jsurl-rewritingdirectorydestination
simon
simon

Reputation: 2377

NextJs Rewrites, second rewrite not working

Im trying to do a simple rewrite. So all /app traffic rewrites to /frontend folder, and all /backend traffic rewrites to /backend folder.

I'm getting error 404 if I'm launching: localhost:3000/app/hello I'm not however getting error 404 if I'm launching: localhost:3000/backend/hello

Following is what I have tried in next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
    async rewrites() {
        return [
            {
                source: '/backend/:path*',
                destination: '/app/backend/:path*',
            },
            {
                source: '/app/:path*',
                destination: '/app/frontend/:path*',
            },
        ]
    }
};

export default nextConfig;

I have page.tsx files in both frontend and backend:

src\app\frontend\hello\page.tsx

export default function World() {
    return (
        <div>
            body
        </div>
    )
}

src\app\backend\hello\page.tsx

export default function World() {
    return (
        <div>
            body
        </div>
    )
}

So to summarize, the first backend rewrite is working perfectly, while /app is not

Upvotes: 1

Views: 1598

Answers (2)

Fakhrul Islam Fuad
Fakhrul Islam Fuad

Reputation: 921

This will fix your issue:

/** @type {import('next').NextConfig} */
const nextConfig = {
    async rewrites() {
        return [
            // Your backend rewrite part
            {
                source: '/:path*',
                destination: '/frontend/:path*',
            },
        ]
    }
};

Now try to hit localhost:3000/hello and it will redirect you to the expected path localhost:3000/frontend/hello.

Upvotes: 1

Dave Lin
Dave Lin

Reputation: 91

If there is src or app in the root directory, next will ignore it and rewrite function will be applied after checking filesystem.

So basically both of your rewrite destination are not existed.

The reason localhost:3000/backend/hello worked is there is a page.tsx at src\app\backend\hello, so rewrite did not applied.

This should work:

  async rewrites() {
    return [
        // looks like backend doesn't need redirect
        {
            source: '/app/:path*',
            destination: '/frontend/:path*', //remove 'app/'
        },
    ]
  }

Hope this helpful to you.

Upvotes: 0

Related Questions