I'm doing a project in NextJS however I found that the file name in my pages folder indicates the path that's displayed in the URL bar.

Is there any way I can have a structure like this:

 - Pages
   - 1.jsx
   - 2.jsx
   - 3.jsx

And then have it rendered to url or path: http://localhost:3000/about Where 3.jsx would be mapped to the about link?

I'm doing a project in NextJS however I found that the file name in my pages folder indicates the path that's displayed in the URL bar.

Is there any way I can have a structure like this:

 - Pages
   - 1.jsx
   - 2.jsx
   - 3.jsx

And then have it rendered to url or path: http://localhost:3000/about Where 3.jsx would be mapped to the about link?

• javascript
• node.js
• reactjs
• next.js

Share Improve this question Follow asked Aug 31, 2020 at 6:41 The MagicianThe Magician 3311 gold badge11 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Create a custom server in next.js

Follow this official docs. You can manage every route in your code.

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/about') {
      app.render(req, res, '/3', query) // Pass the file name here so that it reads the proper file from /pages directory
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

Other examples are here:-

• Basic custom server
• Express integration

You can separate the page content in a different folder (to don't map /3) and default export it on about.jsx.

// someFolder/3.jsx
export function AboutPage(){
  return <div>about</div>
}

// pages/about.jsx
import { AboutPage } from '../somefolder/3.jsx'
export default AboutPage

I have been using this structure to enforce Domain Driven Development, separation of concerns, and to type the props more clearly. The only problem is some difficulty of visualizing static props and client fetching at the same time.

In Next.js, a page is a React Component exported from a file in the pages directory. Pages are associated with a route based on their filename.

For example, in development:

pages/index.js is associated with the / route.

pages/posts/first-post.js is associated with the /posts/first-post route.

This is how you create multiple pages with Next.js. Simply create a JS file under the pages directory, and the path to the file bees the URL path. You can name it anything you like, just maintain consistency across your application and you will be fine.

Additionally, since it sounds like you are trying to control how the title/metadata of the page displays in the browser, be sure to take a look at this article which explains exactly how to do this.

How to create custom page heads/metadata

For more details, you can view additional Next.js documentation using the following links.

Next.js basic page documentation

A more plex article about dynamic routes