Next Js take several params in the root-CodePudding

Suppose, I want to take params region and lang in URLs like:
https://root.com/{region}/{lang}
https://root.com/{region}/{lang}/school

How do I do that? I tried Dynamic Routing, but it doesn't seem to work with the root index.js. How should I structure my folder tree?
/pages/[region]/[lang]/index.js Doesn't look like a valid one.

CodePudding user response：

In your default exported component in /pages/[region]/[lang]/index.js you can use next/router - useRouter.

The query object will contain the region and lang parameters.

import { useRouter } from "next/router";

export const Page = () => {
  const { query } = useRouter();
  console.log({ query });
  
  return <>My index page!</>;
};

export default Page;

to get the /school path simply add a school.js file in the same folder as index.js and get query params with useRouter as above.

CodePudding user response：

Hey I believe there are couple ways,

Use dynamic routing for URLs like https://root.com/{region}/{lang}.

Create a "pages" folder with subfolders for each region and language. Inside each subfolder, have an "index.js" file.
Use a library like "next-routes" or "react-router" for routing.