【Next.js】Next.jsの公式の入門をやってみた⑦

はじめに

今回は”Server Side Support for Clean URLs”をやっていきたいと思います。

セットアップ

いつも通りに前回の続きを使っていきたいと思います。

カスタムサーバーを作成する

前回のルートマスキングではリロードするとエラーを吐き出してしまいました。
それの対策として、今回のカスタムサーバーを用います。

まずはじめにExpressをアプリに追加する必要があります。
コマンドプロンプトで以下のコードを打ち込みましょう。

npm install --save express

その後、server.jsを作成します。

f:id:hanaaaaaachiru:20190115212956p:plain

また中身を以下のコードに書き換えましょう。

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 handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})

また、package.jsonの中身も書き換えます。

before

{
    "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start"
    },
    "dependencies": {
        "express": "^4.16.4",
        "next": "^7.0.2",
        "react": "^16.7.0",
        "react-dom": "^16.7.0"
    }
}

after

{
    "scripts": {
        "dev": "node server.js",
        "build": "next build",
        "start": "NODE_ENV=production node server.js"
    },
    "dependencies": {
        "express": "^4.16.4",
        "next": "^7.0.2",
        "react": "^16.7.0",
        "react-dom": "^16.7.0"
    }
}

まだOKというわけではありません。
もうひと踏ん張りしましょう。

ブログ投稿のURLに合わせてカスタムルートを追加します。
server.jsの中身を書き換えましょう。

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('/p/:id', (req, res) => {
    const actualPage = '/post'
    const queryParams = { title: req.params.id } 
    app.render(req, res, actualPage, queryParams)
  })

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

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})

ローカルホストを立ち上げます。

f:id:hanaaaaaachiru:20190115225356p:plain