Next.jsとNextUIでブログを作った

7/13/2023

目次

はじめに

Next.js どころかフロントエンド初心者ですがポートフォリオサイトが欲しくなったので話題なきがする Next.js と NextUI でポートフォリオサイトを作ってみました（このサイトです）。

使ったライブラリ

メインで使ったのは

  • Next.js
  • NextUI
  • Tailwind CSS

です

他にもマークダウンから Html にする react-markdown など細々としたライブラリを使用しています。

App Router

自分は Next.js を使うのが今回が二回目だったのですが、Next.js 13 になった影響で初回とは違いプロジェクトの構成がガラッと変わりました。

Next.js v13.4.0 では App Router が安定版になり、Next.js プロジェクトの作成時に推奨されるようになりました。

App Router の機能は触ったことがないので検証も兼ねてブログサイトで App Router を使用しています。

App Router - Server Component / Client Component

Next.js App Router の重要な点として Server Component(SC) Client Component(CC)が導入されたことだと思います。

デフォルトでは全てのファイルが Server Component として処理されます。

Client Component としてプログラムを作成する場合はファイルの先頭に"use client";を配置します。これによりそのファイルに書かれたプログラムは Client Component として実行されます。

App Router - ページ構造

以前までの Next.js（以前までの Next.js をほとんどしらない）では_app.tsx _document.tsxなどを用いてページを初期化、レイアウトし、ファイル名でページを作成していたと思いますが、App Router ではディレクトリでページを構成します。

わかりやすいように具体的に例を示します。

  • app
    • page.tsx <localhost/>
    • blog
      • page.tsx <localhost/blog>
    • profile
      • page.tsx <localhost/profile>

ディレクトリがページのパスになり、ページの実態はpage.tsxに記述します。

page.tsxにはexport defaultで任意の関数をページの実態として出力します。

例

1export default function Page() {
2  return (
3    <main>
4      <h1>こんにちは</h1>
5    </main>
6  );
7}

App Router - SSG

以前まではnext exportを使用して SG を利用していましたが、
App Router ではnext.config.jsの output のオプションで SG を指定できます。

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  output: "export",
4};
5
6module.exports = nextConfig;

上記の設定を済ませることでnext buildでoutディレクトリに出力されます。

以前までの Next.js ではgetStaticPropsやgetServerSidePropsを使用してきたと思いますが、App Router ではそれらを用いません。

主にgenerateStaticParamsを使用します。

1// Return a list of `params` to populate the [slug] dynamic segment
2export async function generateStaticParams() {
3  const posts = await fetch("https://.../posts").then((res) => res.json());
4
5  return posts.map((post) => ({
6    slug: post.slug,
7  }));
8}
9
10// Multiple versions of this page will be statically generated
11// using the `params` returned by `generateStaticParams`
12export default function Page({ params }) {
13  const { slug } = params;
14  // ...
15}

上は Next.js にサンプルとして置かれていたコードを拝借してきたものです。

コードのようにgenerateStaticParamsで返り値として出力したデータを default 関数が params というパラメータで受け取っています。