【Next.js入門⑧】next-routerを使ってクエリパラメータを受け取る

こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。

筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。

server.jの作成

まず、server.jsというファイルを作成していきましょう。

初めに以下のコマンドをターミナルから入力します。

npm install --save express

次に以下のファイルを作成します。
server.js

const express = require('express')
const next = require('next')
const routes = require('./routes')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = routes.getRequestHandler(app)

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)
})

next-routerの導入

次にnext-routerを導入します。

npm install next-routes --save

以下のファイルを作成します。
routes.js

const routes = require('next-routes')

module.exports = routes()
.add('test', '/test/:id')

pages/test.js

import React from 'react';
import BaseLayout from '../components/layouts/BaseLayout';
import { withRouter } from 'next/router';
import axios from 'axios';

class Test extends React.Component {

    static async getInitialProps({query}) {
        const testId = query.id
        return {testId};
    }

    render() {
        const {testId} = this.props;
        return (
            <BaseLayout>
                <h1>I am Test Page with id of {testId}</h1>
            </BaseLayout>
        )
    }
}

export default withRouter(Test);

さて、ここまで書けたら
http://localhost:3000/test/1
にアクセスを指定みましょう。

そうするとtest.jsが表示され、クエリパラメータの数字が表示されるはずです。
next-routerを使うことでクエリパラメータの値を受け取り、それに応じて表示を切り替えることができます。

ヘッダーメニューに、next-routerを利用したタグの配置をしておきましょう。

components/shared/Header.js

import React from 'react'
import Link from 'next/link'
import '../../styles/main.scss'
import {Link as NextLink} from '../../routes' // Add

class Header extends React.Component {
    render() {
        const title = this.props.title;
        const child = this.props.children;
        return (
　　　　// 省略
                <Link href='/cv'>
                    <a>CV</a>
                </Link>
                <NextLink route='test' params={{id: 2}}>Test2</NextLink> // Add
                <NextLink route='/test/5'>Test5</NextLink> // Add
                <style jsx>{`
　　　　// 省略

上記のように書くことで、クエリパラメータを渡すことも可能です。

クエリパラメータを渡す際に2通りの方法がありますが、どちらでも構いません。

<NextLink route='test' params={{id: 2}}>Test2</NextLink> // Add
<NextLink route='/test/5'>Test5</NextLink> // Add