Custom server not required for optional dynamic routes in NextJS version 9.5.2

Question

Custom server not required for optional dynamic routes in NextJS version 9.5.2

I am attempting to implement localized routes with an optional first parameter in the form of /lang?/../../, all without requiring a custom server. Starting from NextJS version 9.5, there is a new dynamic optional parameters feature that can be set up by creating a folder or file named: [[...param]]. I have implemented this. The issue I am facing is that I have other existing routes and I want all of them to include the language prefix as optional, defaulting to a specified language if none is provided.

I have created a folder called [[...lang]] with an index.js file containing a simple function component for testing purposes. The optional parameter now works for the homepage / and /en. However, I also have other files like about.js which I want to be accessible with the optional language prefix, such as /en/about and /about.

I encountered an error when attempting to place about.js inside [[...lang]]:

Failed to reload dynamic routes: Error: Catch-all must be the last part of the URL.

Although I understand the reason behind this error, I have a predefined list of languages ['en', 'fr'], thus I could easily check for the presence of a language parameter.

Is there a method, without resorting to a custom server, to make use of an optionally dynamic initial path segment, such as

/en/about and /about?

javascript next.js

Answer 1

Answer №1

It seems like the feature you're referring to is discussed here. Check out this link for more information: https://nextjs.org/blog/next-9-5#support-for-rewrites-redirects-and-headers

Answer 2

It seems like the feature you're referring to is discussed here. Check out this link for more information: https://nextjs.org/blog/next-9-5#support-for-rewrites-redirects-and-headers

Answer 3

Answer №2

Expanding on @Vibhav's response, the following adjustments can be made in next.config.js:

const nextConfig = {

    async rewrites(){
        return [
// URLs without a base route lang param like /my-page
            {
                source: '/',
                destination: '/'
            },
// URLs with a base route lang param like /en/my-page

            {
                source: '/:lang*/:page*',
                destination: '/:page*'
            },
// URLs `/en/post/post_id`
            {
                source: '/:lang/:path/:page',
                destination: '/:path/:page'
            },
        ]
    }
};

module.exports = withBundleAnalyzer(nextConfig);

All pages are located in the pages folder. This may have limitations as it only works up to a certain depth like /pages/another-folder/file.

You can also access the lang parameter in your pages or _app.js:

....
const router = useRouter();

if(router.query.lang){
    pageProps.lang = router.query.lang;
}
console.log(pageProps.lang);

return (
    <Layout>
        <Component {...pageProps} />
    </Layout>
)

For URL - /en/my-page, router.query.lang will be equal to en. For URL - /my-page, router.query.lang will be undefined, but you can set a default lang.

Answer 4

Expanding on @Vibhav's response, the following adjustments can be made in next.config.js:

const nextConfig = {

    async rewrites(){
        return [
// URLs without a base route lang param like /my-page
            {
                source: '/',
                destination: '/'
            },
// URLs with a base route lang param like /en/my-page

            {
                source: '/:lang*/:page*',
                destination: '/:page*'
            },
// URLs `/en/post/post_id`
            {
                source: '/:lang/:path/:page',
                destination: '/:path/:page'
            },
        ]
    }
};

module.exports = withBundleAnalyzer(nextConfig);

All pages are located in the pages folder. This may have limitations as it only works up to a certain depth like /pages/another-folder/file.

You can also access the lang parameter in your pages or _app.js:

....
const router = useRouter();

if(router.query.lang){
    pageProps.lang = router.query.lang;
}
console.log(pageProps.lang);

return (
    <Layout>
        <Component {...pageProps} />
    </Layout>
)

For URL - /en/my-page, router.query.lang will be equal to en. For URL - /my-page, router.query.lang will be undefined, but you can set a default lang.

Custom server not required for optional dynamic routes in NextJS version 9.5.2

Answer №1

Answer №2

Similar questions

Using PHP to dynamically update image source upon clicking an upload button:

JavaScript - Navigating through JSON object in reverse (from leaf to root) direction

What is the method for checking the pathname condition?

Having difficulty implementing Jquery UI effects within an HTML Dialog in Google Apps Script

Bypassing the "Your connection is not private" error in NodeJS + Express with fetch() using Javascript

What is the correct way to dynamically switch between RTL and LTR in React with Material UI?

Storing Images in MySQL Database with JavaScript and Node.js: A Step-by-Step Guide

The issue of fonts module resolution in React-Native remains unsolved

achieving initial value to show upon page load

How can a chat script be created efficiently without needing Server Root Access?

Establish a connection between the MySql database in WHM (phpmyadmin) and a node.js application

Top method for implementing select all checkboxes in a table

Specialized hover mission

Using Angular JS to manage multiple views with a single controller

Unable to utilize a custom function within JQuery

Executing the `process.nextTick` function throws an error, causing the message: "Headers cannot be set once they have been sent."

Undefined React custom hooks can be a tricky issue to troub

When using JQuery's :first selector, it actually chooses the second element instead of the first

Filtering the data in the table was successful, but upon searching again, nothing was found. [Using Angular, Pagination, and

What is the method for selecting an element using CSS code in Protractor?