2017-05-03 105 views
1

我想在框架中实现动态路由,以便根据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

+0

只转储代码到'./ server.js'并编辑脚本 – lxe

+0

难道我不想从'。/ dist'文件夹运行转译的版本吗? – Stretch0

回答

0

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"