Subroutes in Next Js

user_3629330 0
Viewed 4087

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

next.js routing javascript
4 Answers

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.

user_59930420

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)
  })
user_90574730

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
user_102359390

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

user_117945770
Related