CODEWITHSUNDEEP
reactjsnext.js
Ascolon
Ascolon

Reputation: 217

Next.js How to make a redirect correctly

I have such a page structure.

locale can be any value from the language-country pair
eg en-ca, fr-fr, ar-en

[locale] // main folder route

   page1.tsx // child route

   page2.tsx // child route

   page3.tsx // child route

For example, if I go to the address /page1, then I redirect to /locale/page1

But the problem is that I check on the browser side and first a 404 page appears in the browser and only then redirects to the correct address. I think that it is necessary to check on the server. I was making my own file for the server. But the problem is that there is no way to track the address for which the request is going and that means I cannot check if the address starts with the parameter I need.

Upvotes: 0

Views: 1167

Answers (1)

Jirka Svoboda
Jirka Svoboda

Reputation: 418

In case you do not wont to use Next.js native i18n routing you can create fallback page file pages/[...fallback].ts to catch all non-existing page. Then you can use use getServerSideProps to redirect properly.

This could work for you (not tested):

// The page content will never be rendered 
const FallbackPage = () => <div>Redirecting...</div>

// Is processed on every request on server side
export const getServerSideProps: GetServerSideProps = async (ctx) => {

    // TODO: add custom detection (e.g. based on headers or cookies)
    const locale = 'en'
    const destination = `/${locale}/${ctx.params.fallback.join('/')}`

    return {
      props: {},
      redirect: { destination, permanent: false },
    }

}

export default FallbackPage

Upvotes: 1

Related Questions