Twitter

Category

もっと見る

Tag

もっと見る

    HOME  >  Web開発 >  【Next.js】Next.jsとは？環境構築やHello World表示までをご紹介

Web開発

【Next.js】Next.jsとは？環境構築やHello World表示までをご紹介

【Next.js】Next.jsとは？環境構築やHello World表示までをご紹介

目次

  1. Next.jsとは？
  2. 環境構築
    1. Node.jsのインストール
    2. 開発プロジェクトの作成
    3. Nextアプリを起動
  3. プロジェクトフォルダーの内容
  4. Hello Worldを表示する

今回はReactのフレームワークであるNext.jsについて、環境構築からHello World表示までをご紹介します。

Reactについては既に何記事か投稿しているので、そちらも合わせてご覧ください。

【React.js】React.jsとは？環境構築やHello World表示までをご紹介
https://www.dailyupblog.com/web_development/1830/

【React.js】React.jsにおけるコンポーネントとpropsの使い方をご紹介！
https://www.dailyupblog.com/web_development/1860/

【React.js】useStateとuseEffectの使い方をご紹介（React hooksを学ぶ）
https://www.dailyupblog.com/web_development/1888/

Next.jsとは？

Next.jsとは、Reactの機能を拡張したフレームワークです。

なので、基本的なルールはReactと同じですが、SPA（シングルページアプリケーション）の開発がメインのReactに対して、Next.jsでは様々な便利な機能を使うことができます。

その代表的なものの一つが、SSR（サーバーサイドレンダリング）やSG（静的サイト生成）などの様々なレンダリング手法での開発が可能な点です。

SSRはサーバー側でレンダリングを行います。
なので、常に最新のデータでページが構成され、ビルドの時間を必要としません。
サーバー側でレンダリングされるため、SEOやOGPを向上させるメリットがあります。
ただ、リクエストを受けてから全ての処理が行われるため、SGより遅いです。

SGはビルド時に前もってレンダリング（プリレンダリング）を行います。
なので、リクエスト時には、プリレンダリングされているものを返すだけなので、早いです。
静的なページになるので、データの更新などはできません。

他にもSGを利用しながらも、一定時間ごとにデータの再取得を行えるISR（Incremental Static Regeneration）などもあります。

このようにNext.jsでは様々なレンダリング手法で開発することが可能で、ページ単位でこれらを柔軟に選択することができます。

他にもNext.jsでは、ページ間リンクを自動で生成してくれたり、豊富なCSSフレームワークが存在したり、コンポーネントベースのアーキテクチャを採用しているため、コードを再利用可能な単位で管理でき、修正や機能追加が容易で合ったりと、様々なメリットがあります。

環境構築

それでは早速Next.jsを動かしてみましょう。

本記事執筆時のNextの最新バージョンは、15.3.2です。

Node.jsのインストール

Next.jsはReact同様にNode環境が必要です。

未インストールの方は下記からインストールしましょう。
https://nodejs.org/ja/download/

インストールが完了したら、コマンドプロンプト（Macならターミナル）を開いて、下記コマンドを実行して、nodeがインストールされたか確認してください。

node -v

バージョンが表示されれば、OKです。

nodeコマンドが使えない場合、パスを通す必要があるので、その場合は下記手順に従って、パスを通してください。

Windows10の場合
https://qiita.com/shuhey/items/7ee0d25f14a997c9e285

Macの場合
https://qiita.com/nbkn/items/01a11392921119fa0153

開発プロジェクトの作成

Nodeのインストールが完了したら、早速Next.jsのプロジェクトを作成します。

ターミナルを開いて、プロジェクトフォルダを作りたいディレクトリに移動したら、下記コマンドを実行しましょう。

npx create-next-app@latest

すると下記のような質問がされます。今回は以下の例のように設定しました。

✔ What is your project named? … my-app（プロジェクト名）
✔ Would you like to use TypeScript? … Yes（TypeScriptを利用するか）
✔ Which linter would you like to use? › ESLint（ESLintを利用するか）
✔ Would you like to use Tailwind CSS? … Yes（Tailwind CSSを利用するか）
✔ Would you like your code inside a `src/` directory? … Yes（/srcフォルダを作成するか）
✔ Would you like to use App Router? (recommended) … Yes（App Routerを利用するか）
✔ Would you like to use Turbopack? (recommended) … No（Turbopackを利用するか）
✔ Would you like to customize the import alias (`@/*` by default)? … No（importエイリアスをカスタマイズするか）

上記設定を完了すると、プロジェクトフォルダが作成されます。

Nextアプリを起動

早速アプリを起動してみましょう。

下記コマンドを実行してください。

npm run dev

そしてブラウザで「http://localhost:3000」にアクセスすると、下記画面が表示されるはずです。

プロジェクトフォルダーの内容

Nextのプロジェクトフォルダーのフォルダー/ファイル構成は下記の通りです。

.
├── /node_modules（インストールされたライブラリ）
├── /public（公開フォルダ）
├── /src（ソースコードの配置先）
│   └── /app（ページコンポーネント）
├── .eslint.config.mjs（ESLint設定ファイル）
├── next-env.d.ts（型の環境定義ファイル）
├── .gitignore（指定データを管理外に設定するGitの設定ファイル）
├── tsconfig.json（typescript設定ファイル）
├── next.onfing.ts（Next.jsの設定ファイル）
├── package.json（npmの設定ファイル）
└── README.md（Readmeファイル）

ただ、Nextでは、srcディレクトリ内のappフォルダ直下にページコンポーネントのファイルを格納します。
それ以外は基本Reactと同様で、srcディレクトリ内にcomponentsフォルダやlibフォルダ、apiフォルダなどを格納していくことになるでしょう。

Hello Worldを表示する

それでは、Nextアプリ上で「Hello World」を表示して見ましょう。

「src」>「app」>「page.tsx」ファイルを開きましょう。

returnの中の5行目から101行目までを全て削除し、下記のようにコードを追記します。

page.tsx

export default function Home() {
  return <p>Hello World</p>;
}

ブラウザで確認すると、下記のようにHello Worldが表示されているはずです。

関連記事

関連記事