Next js multiple dynamic pages-CodePudding

I am using Next Js in my application. I know that we can create dynamic pages using pages folder, but i can not create a certain design for pages structure.
What i want to achieve: I need to have the next paths in my application: /user/pageAccordingUserIdWhichIsDymamicPage/userDataWhichIsStaticPage/anotherDynamicPage.
My question is, how the folder structure should look?
Note: all paths are related to user, so i expect that the pages should be located in one page folder from pages.

CodePudding user response：

This is possible using a feature known as dynamic routing. For more information see: https://nextjs.org/docs/routing/dynamic-routes.

In your example you would use a directory structure that looks like: pages/[userId]/userData/[dynamic].js.

You could then access the dynamic properties by doing something like this:

import { useRouter } from 'next/router'

const Post = () => {
    const router = useRouter()
    const {userId, dynamic} = router.query

    return <p>
        userId: {userId} <br />
        dynamic: {dynamic}
    </p>
}

export default Post

(Example adapted from the link above)

CodePudding user response：

In Next js your route endpoints are defined by the file name thus making it quick and easy to create a new route.

Now let's say that you want to create a route like this "/profile/:id" with id being your custom parameter.

To create a file with a custom parameter just surround your custom parameter with brackets like this [id]

You can also use the three dot syntax (like this [...id]) to accept infinite unspecified params.

I would suggest watching the video linked down below which really helped me get started with Next js.

nextjs crash course