Next.jsでブログを作ってみる

Next.jsとローカルにあるブログデータを使ってブログを表示します。

"next": "^10.0.5",
"typescript": "^4.1.3"

静的HTML生成

基本的にNext.jsの静的HTML生成機能を使います。

一覧ページ

getStaticProps関数を公開してページコンポーネントに情報を渡します。

export const getStaticProps = async () => {
    return {
        props: {
            posts: await getPosts() // 投稿を取得
        }
    }
}

投稿ページ

各投稿ページも事前に全てのパスがわかっているので静的に生成できます。
getStaticPaths, getStaticProps関数を公開してページコンポーネントに情報を渡します。

export const getStaticPaths: GetStaticPaths = async () => {
    return {
        fallback: false,
        paths: await getPaths() // 記事のパスを取得
    }
}
export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
    return {
        props: {
            post: await getPost(params?.id) // 記事を取得
        }
    }
}

デプロイ

静的ファイルを出力することもできます。

next export

SSGに加えてSSRとISRも一緒に使えるのでNext.jsサーバーを使う運用ができます。

next build
next start

今後

すごく簡単にできました。
次は検索やタグで絞り込みなどSSRかISRでやっていきたいです。