Next.jsを使ったアプリケーション開発を行うことが増えてきたので、「そもそもNext.jsとはなんなのか」ということを初心者向けに書いていきたいと思います。
Next.jsとは?
Next.jsとは一言で言うとReactをベースに開発された、フロントエンドフレームワークです。
フレームワークとは直訳すると「枠組み」「骨組み」という意味で、まさにプロジェクトやプロダクトを構成する骨組みを提供してくれるものです。
フロントエンド開発者がサーバーサイドレンダリング、静的サイト生成、APIルートなどを容易に実装できるように設計されています。
モダンなReactアプリケーションを簡単に構築することができるため、React開発者にとって非常に人気のフレームワークです。
Reactとの違いは？
Next.jsとReactの1番の違いは、サーバー機能の有無です。
ReactはJavaScriptのライブラリであり、クライアントサイドでのみ動作します。
そのためバックエンドとして別途必要なライブラリや設定を自分で組み合わせて環境を構築する必要があります。
一方、Next.jsはReactをベースにしたフレームワークであり、サーバーサイドでのレンダリングをサポートしているため単体でWebアプリを動作させることができます。
Next.jsの主な特徴
サーバーサイドレンダリング
Next.jsは、サーバーサイドレンダリングを簡単に実装できるように設計されています。
サーバーサイドレンダリングは、クライアントサイドレンダリングに比べて、SEOの向上、初回読み込みの高速化などのメリットがあります。
自動的なルーティング
Next.jsは、自動的なルーティングをサポートしています。
これにより、開発者は、ルーティングの設定を手動で行う必要がなくなります。
また、ファイルシステムをベースにしてルーティングを自動的に行うため、開発者はルーティングの設定をよりシンプルに行うことができます。
APIルート
Next.jsは、APIルートをサポートしています。APIルートを使用することで、独自のAPIエンドポイントを簡単に作成できます。
基本操作
ここでは実際にNext.jsのプロジェクトを作成していきたいと思います。
初めに以下の前提条件を満たしていることを確認した上で進めていきます。
前提
- Node.js 14.6.0 またはそれ以降がインストール済み
- MacOS、Windows（WSLを含む）、Linuxのいずれかに環境が対応している
プロジェクトを作成
新規でプロジェクトを作成するには、ターミナルで次を実行します。
yarn create next-app
# or
pnpm create next-app
プロジェクト作成にあたりいくつか質問が聞かれます。
今回は最低限のものということで以下の通り進めています。
✔ What is your project named? … next-project
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
プロジェクト作成が完了したら作成したフォルダに入っていきます。
cd next-project/
プロジェクトを起動
ではここで早速作成したプロジェクトを開いていきます。
あらかじめ設定されているコマンドには以下のものがあります。
-
dev: Next.js を開発モードで起動するために実行します -
build: 実稼働用のアプリケーションをビルドするために実行します -
start: Next.js 本番サーバーを起動するために実行します -
lintNext.js の組み込み ESLint 構成をセットアップするために実行します
コマンドは先にnpmやyarnを
今回は開発モードで十分のため以下のコマンドで開発サーバーを起動していきます。
yarn dev
# or
npm run dev
起動が完了したら、 http://localhost:3000/ にアクセスしてみましょう。
以下の画面が表示されたら完了です。
ページの編集
プロジェクトの作成、起動が完了したら、現在表示されている画面を試しに操作してみましょう。
next-project/src/pages/index.jsファイルの内容を以下に書き換えてみましょう。
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
ファイルの内容を保存したのち、再度先ほどの http://localhost:3000/ にアクセスしてみましょう。
先ほど追加した"Welcome to Next.js!"の文字が出ていれば編集完了です。
参考: