Next.js は、Vercel 社が2016年に公開した、React でつくった画面をそのままWebサイトとして公開できるようにする枠組みです。いま新しく作られる React のサイトの多くが、この上に乗っています。

React 単体との一番の違い

React だけで作ると、最初に返るHTMLはほぼ空です。Next.js は、ビルドの時点またはサーバー側でHTMLを組み立てて返せます。つまり、検索エンジンにも中身が読まれ、最初の表示も速くなります。

この違いが、集客を目的にしたサイトで Next.js が選ばれる理由です。逆にログインした人しか見ない管理画面なら、React 単体でも困りません。

3つの返し方

• 静的書き出し（SSG）… ビルド時にHTMLを作っておく。いちばん速く、公開先も選ばない
• サーバーで組み立てる（SSR）… アクセスのたびにサーバーがHTMLを作る。内容が人によって変わる場合
• ブラウザで組み立てる（CSR）… React 単体と同じ。ログイン後の画面など

1つのサイトの中で、ページごとに使い分けられるのが Next.js の便利なところです。会社案内は静的、会員ページはサーバー側、という組み合わせができます。

レンタルサーバーでも公開できる

「Next.js には Node.js が動くサーバーが必要」と思われがちですが、静的書き出しにすれば、できあがったHTMLを普通のレンタルサーバーに置くだけで公開できます。

このサイト（wp-coding.jp）と、自社サービスサイトの grip space は、どちらも Next.js の App Router で作り、静的書き出ししたHTMLをレンタルサーバーに置いて運用しています。

App Router とは

2022年に入った、ページの置き方の新しい仕組みです。`app` というフォルダの中に、URLと同じ形でフォルダを作っていくと、それがそのままページになります。

app/
├─ page.tsx          →  /
├─ coding/
│   └─ page.tsx      →  /coding/
└─ column/
    ├─ page.tsx      →  /column/
    └─ [slug]/
        └─ page.tsx  →  /column/記事のスラッグ/

ページを増やす作業が「フォルダを作る」だけになるので、構成が把握しやすく、あとから触る人にも読みやすい形になります。

決めておくこと

1. 静的書き出しにするか、Node.js が動くサーバーで動かすか
2. 更新する箇所をどこに持たせるか（WordPress と組み合わせるか）
3. 更新したときに、誰がビルドを走らせるか（自動にするか）

この3点を最初に決めておかないと、公開後に「更新できない」「反映のしかたが分からない」ということになりがちです。当社では設計の段階でお伺いしています。