人気のJavaScriptフレームワークNext.jsを解説｜ほぼReactの進化版

1. Next.jsとは

Next.jsは、React.jsをベースにしたサーバーサイドレンダリングのフレームワークです。

サーバーサイドレンダリングとは、Webページの初回表示時にサーバー側でHTMLを生成し、クライアントに返す技術のことです。

これにより、初回表示の速度が改善され、SEOにも有利になります。

また、Next.jsは自動的に最適化されたバンドルを生成するため、高速なページ読み込みを実現できます。

2. Next.jsのインストール

まずは、Next.jsをインストールする必要があります。

以下のコマンドを入力して、Next.jsをインストールしましょう。

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

これで、Next.jsの開発サーバーが起動します。

ブラウザで http://localhost:3000/ を開くと、Next.jsの初期ページが表示されます。

3. ページの作成

次に、簡単なページを作成してみましょう。

以下のコードを pages/index.js というファイル名で保存しましょう。

function Home() {
  return <div>Hello, Next.js!</div>
}

export default Home

このコードでは、Home という関数コンポーネントを定義しています。

この関数コンポーネントは、<div>Hello, Next.js!</div> を返しています。

そして、この関数コンポーネントを export default しています。

次に、ブラウザで http://localhost:3000/ を開くと、作成したページが表示されれば、簡単なページの作成が完了です。

4. ルーティングの設定

次に、ルーティングの設定を行いましょう。

ルーティングとは、URLとページの対応関係を定義することです。

Next.jsでは、pages ディレクトリ内にファイルを作成することで、自動的にルーティングが設定されます。

例えば、pages/about.js というファイルを作成すると、/about というURLでアクセスできるようになります。

以下のように、pages/about.js を作成してみましょう。

function About() {
  return <div>About Page</div>
}

export default About

このコードでは、About という関数コンポーネントを定義し、

<div>About Page</div>

を返しています。

そして、この関数コンポーネントを export default しています。

ブラウザで http://localhost:3000/about を開き、作成したページが表示されたらルーティングの設定が完了です。

5. データの取得

次に、外部APIからデータを取得して、ページに表示する方法を見ていきましょう。

以下のコードでは、JSONPlaceholder というAPIから、ユーザー情報を取得して表示しています。


function Users({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users')
  const users = await res.json()

  return {
    props: {
      users,
    },
  }
}

function Home({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <Users users={users} />
    </div>
  )
}

export default Home

このコードでは、Users という関数コンポーネントを定義し、users プロパティを受け取って、ユーザー情報を表示しています。

そして、getStaticProps という関数を定義しています。

これは、Next.jsが提供する静的生成のための関数であり、この関数内で外部APIからデータを取得して、propsとして返すことができます。

ブラウザで http://localhost:3000/ を開き、APIから取得したユーザー情報が表示されたらデータの取得が完了です。

6. まとめ

以上で、Next.jsの基本的な使い方について解説してきました。

Next.jsを使うことで、サーバーサイドレンダリングやルーティング、データの取得などが簡単に行えるようになります。

また、React.jsを学んだ人にとっては、学びやすいとされているため、今後のWebアプリケーション開発には欠かせない技術となっています。

ぜひ、実際に手を動かして、Next.jsを使ってみてください。