MonBloG

Next.jsでブログ開発を始めた話

最近、アウトプット用のブログを自作したいと思い、Next.jsで開発を始めました。
『そもそも、Next.jsってなに？』という状態から始めたので、自分なりに理解したことをまとめていきたいと思います。

Next.jsとは何か（自分なりの理解）

これまでReact（Vite）を使って開発してきた自分にとって、Next.jsは「Reactの進化版」のような存在だと感じています。

React単体だと、ルーティングやデータ取得、ディレクトリ構成などを自分で考えて設計する必要があります。一方、Next.js(※)は、それらが最初からある程度決まっていて、「こう作るといいよ」という型が用意されています。

※Next.jsをちゃんと理解したい方は「こちら（公式ドキュメント）」

例えば、

ファイルベースルーティング（app/ 配下にファイルを置くだけでURLになる）
サーバー側でのデータ取得（Server Component）
ビルド時に静的生成（SSG）

といった機能が標準で使えます。

最初は正直、「自由度が低そう...」と思っていたのですが、実際に触ってみると、むしろ「迷いが減る」という意味で開発しやすいと感じました。

なぜブログ開発にNext.jsを選んだのか

ブログを作るにあたって、React（Vite）のままでも実装は可能でした。ただ、いくつか理由があってNext.jsを選びました！

理由

SEOとの相性
ブログは「読まれること」が重要なので、検索エンジンにしっかり評価される必要があります。Next.jsはサーバーサイドレンダリングや静的生成ができるため、SEOに強い構成を作りやすいです。
構成がブログと相性がいい
例えば、/blog/[slug] のような動的ルーティングが簡単に作れるので、記事ごとのページ生成がとても自然に書けます。
「実務に近い経験になる」と思った
最近の現場ではNext.jsを採用しているケースも多く、自分のスキルアップとしても触っておきたい技術でした。

....何社もNext.jsを採用していますが、その中から、2社、企業名とテックブログを、以下にリンクを載せておきます。

SmartHR- テックブログ
cookpad - テックブログ

Next.jsの基本的なコード

最後に、基本的なコードを書いて締め括ろうと思います。

ファイルベースルーティング
Next.jsの大きな特徴の1つがこれです。

React（Vite）だと、react-router-domを使ってルーティングを自分で設定していましたが、Next.jsではそれが不要になります。

例えば、以下のような構成にすると...

app/
  page.tsx
  about/
    page.tsx

これだけで、「/」はトップページ、「/about」はAboutページに遷移します。
最初は「え、これだけ？」と思いましたが、かなり便利です。

ページの基本コード

Next.jsのページはこんな感じで書きます！

export default function Page() {
  return (
    <div>
      <h1>こんにちは、Next.js</h1>
    </div>
  );
}

かなりシンプルですが、これだけでページとして表示されます。Reactとほぼ同じ書き方なので、そこまで違和感はありませんでした。

データ取得（サーバー側で実行される）

Next.jsで「おもしろいな」と思ったのがここです。

async function Page() {
  const res = await fetch("https://example.com/api");
  const data = await res.json();

  return (
    <div>
      <h1>{data.title}</h1>
    </div>
  );
}

export default Page;

これ、一見普通のfetchですが、サーバー側で実行されるというのがポイントです。
つまり、

ブラウザではなく、サーバーがデータを取ってきてHTMLを作ってくれる

最初は少し混乱しましたが、「どこで処理が動いているか」を意識すると理解しやすかったです。

まとめ

Next.jsを少し触ってみて感じたのは、

👉「Reactにルールと便利機能が追加されたもの」

という印象でした。

特に、

ルーティングが簡単
サーバーでデータ取得できる
ブログとの相性がいい

という点で、今回のブログ開発にはかなり合っていると感じています。

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