CODEWITHSUNDEEP
javascriptroutesnext.js
fgonzalez
fgonzalez

Reputation: 3877

Subroutes in Next Js

I´m new to next js, I have created a file called orders.js under pages directory, and I can access it correctly from localhost:3000/orders.

However, I want now to have a subroute, to access the order with id 1 (for example). So I have created a directory 'orders' inside the directory pages, and renamed order.js to index.js, after that, I have created another file inside the orders directory called id.js.

So my current structure is:

pages/
      orders/
             index.js
             id.js

However I cannot access to localhost:3000/orders/1.

Using Nuxt js, this was trivial, how can I achieve the same with next.js ?

Thanks

Upvotes: 3

Views: 5472

Answers (4)

Yadab Sutradhar
Yadab Sutradhar

Reputation: 659

use

pages/ orders/ [dynamic_subroute].js

now catch it with

const router = useRoute(); const { dynamic_subroute } = router.query;

Now, you can catch the value (any) dynamically from the url which is used instead of dynamic_subroute

like- if the url is pages/orders/1 then value of dynamic_subroute will be 1 in your page

Upvotes: 0

visizky
visizky

Reputation: 761

This might help you : https://nextjs.org/docs#dynamic-routing.

by adding [ ] to a page it creates a dynamic route, in this case [orderid].js can be used to map multiple orders to a single page. 

pages/
       orders/
              [id].js

Upvotes: 1

abhishek kasana
abhishek kasana

Reputation: 1522

You can try using next-routes, dynamic routes for Next.js

And simply create a routes.js and add,

const routes = require('next-routes')
module.exports = routes()
 .add('orders', '/orders/:id', 'orders/id')
// name, url, page folder

Or if you only want the server side routing,

  server.get('/orders/:id', (req, res) => {
    const actualPage = '/orders' 
    app.render(req, res, actualPage, req.query)
  })

Upvotes: 0

Obed Parlapiano
Obed Parlapiano

Reputation: 3682

This is also trivial with Nextjs, however, you're trying to achieve it the harder way.

Your first approach is correct. If you don't specify a route for your pages in the server.js file, Nextjs will automatically use them if the URL is correct (in this case orders leads to the orders.js page).

What you're looking for is to create a custom route. You can see the documentation for this here

I find the example in the documentation confusing, so I recommend using express instead. Here's an example for that. You can then see the express routes in the server.js file of the example.

Your route would end up looking something like this:

server.get('/orders/:id', (req, res) => {
  return app.render(req, res, '/orders', req.query)
})

Where :id is a query param which you can then access in your getInitialProps inside your orders.js page.

You can check the express routing examples in the express documentation.

Upvotes: 2

Related Questions