Next.jsとは?使い方や特徴を初心者向けにわかりやすく解説!

当サイトでは一部リンクに広告が含まれています
nextアイキャッチ

近年、WebアプリケーションやWebサイトの開発において、Next.jsという言葉を耳にする機会が増えてきました。Next.jsは、Reactをベースとしたフレームワークで、Webアプリケーション開発を効率化し、高速で使いやすいWebサイトを構築するのに最適なツールです。

でも、「Next.jsって何ができるの?」「どんな特徴があるの?」と、Next.jsについてよくわからないという方も多いのではないでしょうか。

そこで本記事では、Next.jsの基本的な概念から、具体的な使い方、開発の流れまで、初心者の方にもわかりやすく丁寧に解説していきます。

Next.jsを使ってモダンなWebアプリケーション開発を始めるための第一歩を、一緒に踏み出しましょう!

この記事を書いた人
筆者のプロフィールアイコン
  • 現役のフルスタックエンジニアとして活躍中
  • 開発チームリーダーとして複数プロジェクトをリード
  • 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
  • プログラミングスクールのカリキュラム執筆経験あり
目次

Next.jsとは

Next.jsは、ReactをベースにしたJavaScriptのフレームワークです。Vercel社によって開発・メンテナンスされており、オープンソースで提供されています。

Next.jsは、Reactの機能を拡張し、Webアプリケーション開発に必要な様々な機能を追加しています。例えば、サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)、ルーティング、コード分割などの機能が組み込まれており、開発者はこれらの機能を簡単に利用できます。

Next.jsを使うことで、高速で使いやすいWebアプリケーションを効率的に開発できるようになります。

ReactとNext.jsの違い

Next.jsはReactをベースにしていますが、ReactとNext.jsには以下のような違いがあります。

  • Reactはライブラリ、Next.jsはフレームワーク
  • Next.jsはサーバーサイドレンダリング(SSR)や静的サイト生成(SSG)に対応
  • Next.jsはルーティング機能を内蔵
  • Next.jsはゼロコンフィグで使える(設定不要)

つまり、Next.jsはReactの機能を包含しつつ、Webアプリケーション開発に必要な様々な機能を追加したフレームワークだと言えます。

Next.jsの特徴

サーバーサイドレンダリング(SSR)

Next.jsの大きな特徴の1つが、サーバーサイドレンダリング(SSR)です。SSRとは、Webページの初期表示をサーバー側で行う技術のことを指します。

通常のReactアプリケーションでは、初期表示はクライアント側(ブラウザ)で行われます。つまり、最初は空のHTMLが表示され、JavaScriptが読み込まれた後にReactがHTMLを生成します。これでは、初期表示が遅くなったり、SEOに不利だったりする問題がありました。

一方、Next.jsではSSRにより、初期表示をサーバー側で行うことができます。サーバー側でReactコンポーネントをHTMLに変換し、そのHTMLをクライアントに送信します。これにより、初期表示が高速になり、SEOにも有利になります。

静的サイト生成(SSG)

Next.jsのもう1つの大きな特徴が、静的サイト生成(SSG)です。SSGとは、ビルド時にHTMLを生成し、静的なファイルとして出力する技術のことを指します。

Next.jsでは、getStaticPropsというメソッドを使って、ビルド時にデータを取得し、そのデータを元にHTMLを生成することができます。生成されたHTMLは静的なファイルとして出力され、CDNにキャッシュされます。

これにより、リクエストのたびにサーバー側でHTMLを生成する必要がなくなるため、レスポンスが高速になります。また、静的ファイルとして出力されるため、サーバーの負荷が減り、ホスティングコストを抑えられるというメリットもあります。

ファイルベースのルーティング

Next.jsでは、ファイルベースのルーティングが採用されています。これは、ファイルシステムに基づいてルーティングを行う方式のことを指します。

具体的には、pagesディレクトリ内のファイル構成に基づいて、自動的にルーティングが設定されます。例えば、pages/index.jsはルートページ(/)に、pages/about.js/aboutページにルーティングされます。

このファイルベースのルーティングにより、直感的で分かりやすいルーティングを実現できます。また、ルーティングの設定を別ファイルに記述する必要がないため、コードがシンプルになり、メンテナンス性も向上します。

ビルトインのCSSサポート

Next.jsには、ビルトインのCSSサポートが備わっています。これにより、CSSを使ったスタイリングを簡単に行うことができます。

Next.jsでは、styled-jsxというCSS-in-JSソリューションが標準で使えます。styled-jsxを使うと、コンポーネント単位でスタイルを記述でき、スタイルの適用範囲をコンポーネント内に限定できます。

また、グローバルなCSSファイルも使用可能です。pages/_app.jsファイルでグローバルCSSをインポートすることで、アプリケーション全体に適用されます。

画像の最適化

Next.jsには、画像の最適化機能も組み込まれています。next/imageというコンポーネントを使うことで、画像の最適化を簡単に行えます。

next/imageは、画像の遅延読み込み(lazy loading)、サイズ調整、WebP形式への変換などを自動的に行ってくれます。これにより、ページの読み込み速度が向上し、ユーザーエクスペリエンスが改善されます。

Next.jsの使い方と開発の流れ

では、実際にNext.jsを使ってWebアプリケーションを開発するには、どのような手順を踏めばよいのでしょうか。ここでは、Next.jsの基本的な使い方と開発の流れを見ていきましょう。

プロジェクトの作成

まず、Next.jsのプロジェクトを作成します。以下のコマンドを実行すると、新しいNext.jsプロジェクトが生成されます。

npx create-next-app@latest my-app

my-appの部分は、プロジェクト名に置き換えてください。

開発サーバーの起動

プロジェクトが生成されたら、プロジェクトのディレクトリに移動し、以下のコマンドで開発サーバーを起動します。

cd my-app
npm run dev

開発サーバーが起動したら、ブラウザでhttp://localhost:3000にアクセスすると、Next.jsのデフォルトページが表示されます。

ページの作成

次に、ページを作成していきます。pagesディレクトリ内に、JavaScriptファイル(.js)またはTypeScriptファイル(.tsx)を作成することで、新しいページを追加できます。

例えば、pages/about.jsというファイルを作成し、以下のようなコードを記述すると、/aboutページが作成されます。

function About() {
  return <h1>About Page</h1>;
}

export default About;

コンポーネントの作成

ページを作成したら、次はコンポーネントを作成します。コンポーネントは、UIの一部を表す再利用可能なパーツです。

コンポーネントは、componentsディレクトリ内に作成するのが一般的です。例えば、components/Header.jsというファイルを作成し、以下のようなコードを記述すると、ヘッダーコンポーネントが作成されます。

function Header() {
  return (
    <header>
      <h1>My App</h1>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>
  );
}

export default Header;

作成したコンポーネントは、ページやほかのコンポーネントからインポートして使用します。

データの取得

多くの場合、Webアプリケーションではデータを取得し、表示する必要があります。Next.jsでは、getStaticPropsgetServerSidePropsといったメソッドを使って、データを取得できます。

例えば、getStaticPropsを使うと、ビルド時にデータを取得し、そのデータをページコンポーネントに渡すことができます。

function BlogPage({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default BlogPage;

ビルドとデプロイ

開発が完了したら、アプリケーションをビルドし、デプロイします。以下のコマンドを実行すると、プロダクション用にアプリケーションがビルドされます。

npm run build

ビルドが完了したら、以下のコマンドでアプリケーションを起動できます。

npm start

実際にアプリケーションを公開する場合は、Vercel、Netlify、AWSなどのサービスを利用すると、簡単にデプロイできます。

まとめ

今回は、Next.jsの特徴や使い方について詳しく解説しました。
Next.jsは、Reactをベースにした強力なフレームワークで、サーバーサイドレンダリングや静的サイト生成、ファイルベースのルーティングなど、Webアプリケーション開発に必要な機能が豊富に用意されています。

Next.jsを使えば、高速で使いやすいモダンなWebアプリケーションを、効率的に開発することができます。
ぜひ、Next.jsを使ってみて、その便利さを体感してみてください!

JavaScript を効率よく勉強するなら

この記事を読んでいる方は JavaScript の勉強を頑張っていることと思います!

しかし、JavaScript は学習範囲が広く、知識不足で苦労している方もいるかもしれませんね。

そんなときは本やプログラミングスクールを活用し、体系的な学習を検討してみてはいかがでしょうか?

目次