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


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

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

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

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

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

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

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

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

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

export default Home

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

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

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


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

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

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

export default About

<div>About Page</div>

次に、外部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

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

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

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

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