Next.jsってなに？ #React

Next.jsってなに？

概要

Next.js（ネクストジェイエス）は、インターネットのホームページを簡単に作れるようにするためのすごい道具箱です。たとえば、レゴブロックを使っていろんなものを作るみたいに、Next.jsを使ってかっこいいホームページを作ることができます。この道具箱は、「React（リアクト）」という人気のあるブロックを使っていて、もっと簡単に使えるようにしてくれます。

どんな背景があるの？

Next.jsは、Vercel（ヴァーセル）という会社が作りました。Vercelは、みんなが簡単に自分のホームページをインターネットで見せられるようにするためのサービスを提供しています。Reactを使ってホームページを作るのはすごく人気なんだけど、Next.jsを使うともっと簡単に便利に作れるんです。

Next.jsのすごいところ

サーバーサイドレンダリング（SSR）

例えば、お店でケーキを注文するとき、店員さんがその場でケーキを作ってすぐに渡してくれる感じです。これがサーバーサイドレンダリングです。サーバー（お店）がホームページを作ってから、みんなに見せてくれます。これで、ホームページがすぐに表示されて、検索エンジン（グーグルとか）にも優しいんです。

サーバーは、インターネット上で動いている特別なコンピュータのことです。このコンピュータがホームページを作ってくれます。

静的サイト生成（SSG）

おばあちゃんが前もってたくさんのクッキーを焼いて、缶に入れて保存しておくようなものです。

これが静的サイト生成です。あらかじめホームページを作っておいて、誰かが見たいときにすぐ見せられるようにします。これで、ページがとても速く表示されて、たくさんの人が見ても大丈夫です。

静的サイトは、あらかじめ作られたホームページのことです。動的サイトは、見る人の要求に応じてその場で作られるページです。

クライアントサイドレンダリング（CSR）

おばあちゃんがクッキーの材料を渡して、自分でクッキーを焼くように言う感じです。これは、ユーザー（ホームページを見る人）のパソコンやスマホでホームページを作る方法です。

クライアントは、あなたのパソコンやスマホのことです。クライアントサイドレンダリングは、クライアント側でページを作ることを意味します。

自動コード分割

おばあちゃんがクッキーを配るとき、一度に全部のクッキーを渡すのではなく、必要なクッキーだけを渡す感じです。これで、ホームページが軽くて速くなります。

コード分割は、ホームページを作るためのプログラムを小さく分けて、必要な部分だけを読み込むことです。これにより、ページの表示が速くなります。

APIルート

おばあちゃんがクッキーのレシピを教えるための特別な窓口を作る感じです。Next.jsでは、データをやり取りするための特別な場所（APIエンドポイント）を簡単に作ることができます。

API（エーピーアイ）は、アプリケーションプログラミングインターフェースの略で、プログラム同士がデータをやり取りするための方法です。

開発者体験の向上

おばあちゃんが料理を作るときに、レシピが常に最新の状態に更新されて、必要な道具がすぐに手に入る感じです。これで、ホームページを作る人が便利に作れるようになります。

開発者体験（DX）は、プログラムを作る人がどれだけ快適に作業できるかを指します。Next.jsはこれを向上させるための機能がたくさんあります。

Next.jsの基本的な使い方

セットアップ

Next.jsのプロジェクトを始めるには、以下の呪文を使います。これで必要な設定が自動的に行われます。

npx create-next-app my-next-app
cd my-next-app
npm run dev

npx create-next-appは、Next.jsの新しいプロジェクトを作るコマンドです。cd my-next-appは、新しいプロジェクトのフォルダに移動するコマンドです。npm run devは、プロジェクトを起動して開発を始めるためのコマンドです。

ページの作成

Next.jsでは、pagesフォルダにファイルを作ると、新しいページができます。例えば、pages/index.jsを作ると、トップページになります。

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

pagesフォルダにファイルを置くと、自動的にそのファイルがホームページのページになります。index.jsは、トップページ（最初に表示されるページ）です。

サーバーサイドレンダリングの設定

特定のページでSSRを使うには、getServerSidePropsという関数を作ります。これで、そのページを開くたびに新しいデータを取得して表示します。

// pages/ssr.js
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return {
    props: {
      data,
    },
  };
}

export default function SSRPage({ data }) {
  return (
    <div>
      <h1>Server Side Rendering</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

getServerSidePropsは、ページを表示するたびにサーバーからデータを取得する関数です。この関数が返すデータは、そのページのコンポーネントに渡されます。

静的サイト生成の設定

特定のページでSSGを使うには、getStaticPropsという関数を作ります。これで、ビルド時にデータが取得され、静的なHTMLが生成されます。

// pages/ssg.js
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return {
    props: {
      data,
    },
  };
}

export default function SSGPage({ data }) {
  return (
    <div>
      <h1>Static Site Generation

</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

getStaticPropsは、ページをビルドするときに一度だけ実行される関数です。この関数が返すデータは、静的なHTMLとして保存されます。

APIルートの作成

Next.jsでは、pages/apiフォルダにファイルを作ると、APIエンドポイントを作ることができます。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

pages/apiフォルダにファイルを置くと、そのファイルがAPIエンドポイントになります。handler関数は、リクエスト（誰かがデータを要求すること）に応じてレスポンス（データを返すこと）を返します。

結論

Next.jsは、ホームページやウェブアプリを作るための便利な道具箱です。いろんな便利な機能が詰まっていて、高性能なホームページを簡単に作ることができます。

Next.jsってなに？

目次