Next.jsとは
Next.jsは、ReactベースのJavaScriptフレームワークです。
ページ遷移の多い大規模なWebサイトや、高速で快適なWebアプリを開発する場合に適しています。
ReactとNext.jsの違い
大きな違いとして 「サーバ機能」 の有無があげられます。
Reactはサーバ機能を持っていないですが、Next.jsはサーバ機能を持っています。
そのため、Next.js単体でWebアプリを作成できます。
Reactはサーバを用意する必要があるため、学習コストや難易度が高くなります。
次に挙げられる違いとして、「URLルーティングの自動生成」 です。
Next.jsはファイルを配置するだけで、 自動的にURLパスが生成 されアクセスができます。
Next.jsの特徴
Next.jsは、Reactの特徴であるコンポーネントベースの開発を簡単にできるだけでなく、以下のような特徴があります。
ファイルベースルーティング
Next.jsでは「Pages」ディレクトリにファイルを配置するだけで自動的にURLパスが生成されます。
/pages/home.tsxファイルを作成
http(s)://localhost/homeでアクセス可能
動的なURLパラメータもブラケット（[]）を使うことで可能です。
/pages/posts/[id].tsxファイルを作成
http (s)://localhost/posts/1 や http (s)://localhost/posts/2 などの任意のidでアクセス可能
Pagesディレクトリ内にサブディレクトリを作成するとネストされたルーティングも可能です。
/pages/tests/test1.tsxファイルを作成
http (s)://tests/test1でアクセス可能
画像の最適化
画像のサイズや形式を自動的に最適化し、表示領域外の画像の読み込みを遅延させることで表示速度の向上ができます。
ゼロコンフィグ機能
Next.jsでは、最低限の設定を自動で行ってくれるため、便利な機能を、事前の設定やインストールなしに使えるようにする機能です。
細かい設定などは、next.config.jsというファイルを作成し、修正を行ったり、パッケージのインストール、設定を行うだけで変更できます。
高パフォーマンスなレンダリング
SG（Static Generation）やSSR（Server Side Rendering）、ISR（Incremental Static Regeneration）といった、サーバー側でレンダリングを行う方式をサポートし、SEO対策やユーザー体験を改善します。
環境構築
ここからはNext.jsのインストールから～初期ページの表示までの環境構築を説明していきます。
事前準備
VSCodeとNode.jsをインストールしておきます。
インストール～初期ページ表示まで
今回はNext.jsのゼロコンフィグ機能を使用して構築を進めます。
VS Code内蔵のターミナルからコマンドを入力します。
Windowsであればコマンドプロンプト、Macであればターミナルからでも問題ないです。
// test-app-nameには好みの名前を設定してください
npx create-next-app test-app-name
入力後、各設定を聞かれますのでYesかNoを選択していってください。
今回は以下のように設定しました。
PS C:\Users\user\test> npx create-next-app test-app-name
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No
その後、自動的にNext.jsのプロジェクトが生成されます。
Creating a new Next.js app in C:\Users\user\test\test-app-name.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next
added 359 packages, and audited 360 packages in 24s
128 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created test-app at C:\Users\user\test\test-app-name
成功したら、作成したディレクトリに移動します。
cd test-app-name
開発サーバの起動を実行します。
npm run dev
開発サーバの起動が開始され、以下のようにターミナルに出力されます。
npm run dev
> test-app@0.1.0 dev
> next dev
▲ Next.js 14.1.0
- Local: http://localhost:3000
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://Next.js.org/telemetry
✓ Ready in 2.2s
○ Compiling / ...
✓ Compiled / in 3.9s (510 modules)
✓ Compiled in 271ms (240 modules)
✓ Compiled /favicon.ico in 277ms (515 modules)
そうしたら http://localhost:3000 にアクセスをします。
以下のような画面が見れたら、成功です。
次回の記事にて、今回作成したプロジェクトに対してNext.jsのチュートリアルや機能の体験ができるように修正・変更を加えていきたいと思います。