NextJS different page name from url name

user_12104142 0
Viewed 5662

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?

next.js reactjs node.js javascript
3 Answers

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:-

user_29470310

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.

user_123916090

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 becomes 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 complex article about dynamic routes

user_127154380
Related