如何在Next.js React Framework中构建自定义/动态路由
问题描述:
我想在框架中实现动态路由,以便根据CMS中的页面生成路由。我已阅读文档和https://github.com/zeit/next.js#custom-server-and-routing看起来会做这项工作。如何在Next.js React Framework中构建自定义/动态路由
const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare()
.then(() => {
const server = express()
server.get('/', (req, res) => {
return app.render(req, res, '/index', req.query)
})
server.get('/b', (req, res) => {
return app.render(req, res, '/test', req.query)
})
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
我的问题是,这个代码在项目中的位置在哪里?我曾尝试创建./server/server.js
,但后来需要在package.json
中更新我的启动脚本,但这些将需要指向dist
版本,如./dist/server/server.js
?即使在运行yarn run build
答
Next.js不transpile定制的服务器代码后
"scripts": {
"build": "next build",
"release": "fly release",
"pretestonly": "fly pretest",
"testonly": "cross-env NODE_PATH=test/lib jest \\.test.js",
"posttestonly": "fly posttest",
"pretest": "npm run lint",
"test": "npm run testonly -- --coverage --forceExit --runInBand --verbose --bail",
"coveralls": "nyc --instrument=false --source-map=false report --temp-directory=./coverage --reporter=text-lcov | coveralls",
"lint": "standard 'bin/*' 'client/**/*.js' 'examples/**/*.js' 'lib/**/*.js' 'pages/**/*.js' 'server/**/*.js' 'test/**/*.js'",
"prepublish": "npm run release",
"precommit": "lint-staged",
"dev": "node ./dist/server/server.js",
"start": "NODE_ENV=production node ./dist/server/server.js"
},
./dist/server/server.js
路径不存在,所以你会像这样启动它:
"dev": "node ./server/server.js",
"start": "NODE_ENV=production node ./server/server.js"
只转储代码到'./ server.js'并编辑脚本 – lxe
难道我不想从'。/ dist'文件夹运行转译的版本吗? – Stretch0