如何在 NEXT.js 中创建子页面

Question

我尝试获取一些子页面，例如

• example.com/tests/project1
• example.com/tests/project2

在 nextjs https://nextjs.org/

我能够创建类似的页面

• example.com/page1
• example.com/page2

通过把这样的页面

page1.js

在页面“文件夹”中，但如何创建子页面，例如

• example.com/tests/page1
• example.com/tests/page2

我尝试的是在 Pages 文件夹中创建子文件夹，但这不起作用并输出错误。

非常感谢帮助

Answer 1

您可以使用像express.js这样的服务器并使用路由系统：

const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
  .then(() => {
    const server = express()

    server.get('/test/:page', (req, res) => {
      const page = req.params.page;
      let file = '';
      switch(page) {
         case 'page1':
               file = '/page1';
               break;
         case 'page2':
               file = '/page2';
               break;
         default:
               file = '/page1';
      }
      return app.render(req, res, file, { page })
    })

    server.get('*', (req, res) => {
      return handle(req, res)
    })

    server.listen(port, (err) => {
      if (err) throw err
      console.log(`> Ready on http://localhost:${port}`)
    })
  })