CODEWITHSUNDEEP
reactjsnext.js
Asking
Asking

Reputation: 4172

Next js multiple dynamic pages

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.

Upvotes: 1

Views: 5771

Answers (2)

Geo
Geo

Reputation: 563

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

Creating the Routes

For each dynamic route/url you wish to create follow the process below:

  1. Divide the URL into different sections based on the '/' character.

For example: "/users/roger/data" would be split to [users, roger, data].

  1. For each section of the URL, create a folder with the corresponding name. If a certain part of the URL is dynamic, the name of the folder should be wrapped in square brackets- [dynamicData].

  2. Finally, create as many index.js files as you need. These files should be placed in the folders you created.

For example, if you wanted the page /users/roger to work - you would go to your pages directory, users, roger, and put an index.js file there. Remember - that if you want 'roger' to be dynamic, you would create a dynamic folder like [userName] instead of roger.

Retrieving the Data

You could then access the dynamic properties in each index.js file by acceding the router's query property. For example:

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

You would obviously replace the {userId, dynamic} with the names you chose for the dynamic routes (i.e - the names of the folders).

(Example adapted from the link above)

Upvotes: 1

Giannis Giannoulakos
Giannis Giannoulakos

Reputation: 101

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 dynamic pages.

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

nextjs crash course

Upvotes: 0

Related Questions