2017-05-03 100 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"