Next.jsでWebアプリを作った

はてなブックマークの人気のエントリの取得と、ローカルストレージへの保存を行うWebアプリを作った。
HateB! Reader
コード

以下Next.jsについての備忘録。

静的レンダリング

アプリのビルド時にレンダリングを行うこと。
表示する値を更新するにはビルドをし直す必要がある。
ブログといった全てのアクセス者に同じコンテンツを提供するWebアプリに向いている。

getStaticProps

静的レンダリングのためにAPIなどを用いて値を取得するメソッド。

index.tsx

import { NextPage, GetStaticProps } from "next";

const IndexPage: NextPage<{message: string}> = ({ message }) => { /* (省略) */ }

export const getStaticProps: GetStaticProps = async () => {

    return {
        props: {
            message: "ようこそ"
        }
    }

}

データ取得はサーバーで行うため、ブラウザからはアクセスできないCORS未対応のAPIにもアクセスできる。

getStaticPaths

静的レンダリング + 動的ルーティングを行うためのメソッド。
下記の例ではhttp://hogehoge.com/post/001 か http://hogehoge.com/post/002 にアクセスが来た際に返すページを作成している。

pages/post/[post_id].tsx

import { NextPage, GetStaticPaths, GetStaticProps } from "next";
import { ParsedUrlQuery } from "querystring";

type Post = {}

const PostPage: NextPage<{post: Post}> = ({ post }) => { /* (省略) */ }

export const getStaticPaths: GetStaticPaths = async () => {

    return {
        paths: [{params: {post_id: "001"}}, {params: {post_id: "002"}}]]
        fallback: false
    }

}

export const getStaticProps: GetStaticProps = async ({ params }) => {

    return {
        props: {
             /* ユーザーが定義したメソッド */
             post: getPost((params as ParsedUrlQuery).post_id as string)
        }
    }

}

これらのメソッドはアプリのビルド時に実行される。またpagesディレクトリに存在するコンポーネントでしか使用できない。

API Route

今回は使わなかったが、Next.jsはAPIを作ることもできる。
以下の例は https://hogehoge.com/api/book?book_id=001 にリクエストを受けた時の処理である。

pages/api/book/index.ts

import { NextApiRequest, NextApiResponse } from "next";

export default async (req: NextApiRequest, res: NextApiResponse) => {
    /* リクエストメソッド */
    console.log(req.method)
    /* クエリ 001 */
    console.log(req.query.book_id);
    /* postリクエストなどでリクエストボディを受け取る場合 */
    /* console.log(req.body.xx) */
    /* ここでローカルDBからデータを取ってくることもできる */
    return res.status(200).json({books: []});
}

https://hogehoge.com/api/book/new にしたい場合は同じディレクトリにnew.tsを作れば良い。