Next.js入門: 初心者向けの簡単なセットアップとルーティングシステムの作成方法
ReactのフレームワークであるNext.jsの入門を初心者の方に向けて解説します。
本日の記事と合わせて、静的サイトについても触れています。
こちらの記事も参考にしてみてください：dev-k.hatenablog.com
必要な条件
・ JavaScriptに精通していることや豊富な経験があることが求められます。 クラス、スプレッド演算子、Promiseなどの概念の知識は必須です。
・ ローカルの開発環境にNode.jsがインストールされていること。 Node.jsのインストールは、Download | Node.jsから行ってください。
・ React.jsの基礎知識をある程度持っていること。
※ なお、この記事はNext.js 13以前に投稿された記事となっておりますのでご了承下さい。
Next.jsとは
Reactはライブラリであり、フレームワークではありません。ReactはUIコンポーネントを作成するためのJavaScriptライブラリです。
Next.jsは、Reactアプリケーションのためのフレームワークであり、Next.jsはサーバーサイドレンダリング(SSR)、自動コード分割、静的エクスポートオプションなどの機能を提供し、JavaScriptのツールチェーンとして使用できます。
Next.jsを使用することで、Reactのシングルページアプリケーション(SPA)における初回ページのダウンロードの問題を解決することができます。
また、Next.jsは人気のあるフレームワークであり、巨大なコミュニティを持っています。
そして、本番環境でのアプリケーション構築に使用されます。
Next.jsは事前に構成されたReactのフレームワークでもあり、JavaScriptとTypeScript、CSSとSCSS、静的エクスポート、サーバーレスデプロイメントモデルなど、さまざまなオプションを選択できる柔軟性があります。
Next.jsでのアプリケーションを作成する方法は2つあります。
1つ目は手動で作成する方法です。プロジェクトディレクトリを作成し、必要な依存関係をnpmを使用してインストールする必要があります。
手動による作成方法は以下で詳しく解説していますので参照してください。
2つ目はコマンドを使用する方法です。Next.jsプロジェクトを素早く簡単にセットアップするためのコマンドが用意されています。
本日では、コマンドを使用して初心者でも簡単にセットアップしていく方法を解説していきます。
プロジェクト作成
Next.jsアプリを作成する最も簡単な方法は、 create-next-app コマンドを使用することです。
Next.jsではCNA（Create Next App）を使用することで、素早く簡単にNext.jsプロジェクトをセットアップすることができます。
npx create-next-app my-next-app or yarn create my-next-app
TypeScriptでのプロジェクトが必要な場合は、最後にフラグを追加する必要があります。
npm create my-next-app --typescript or yarn create my-next-app --typescript
このコマンドを使用すると、必要なすべての依存関係を持つプロジェクトを作成してくれます。
新しいプロジェクトにアクセスできるように以下のコマンドを実行しNext.jsプロジェクトを実行できます。
cd my-next-app ↓ npm run dev or yarn dev
任意のブラウザを開きhttp://localhost:3000でアクセスします。
「Welcome to Next.js！」およびドキュメントのリンクなどが画面に表示されていれば問題ございません。
以下のコマンドは絶対条件の優先で覚えておいて下さい
・ npm run dev
開発インスタンスをホットリロード、ファイル監視、タスク再実行で実行させます。
つまり開発用のサーバーを起動させます。
・ npm run build
プロジェクトを本番用にコンパイル(ビルド)します。
・ npm start
アプリを実稼働モードで起動させます、本番用にビルドしたアプリを起動。
それでは、pages/index.jsファイルを開きます。
// pages/index.js <h1 className='title'>Welcome to Next.js!</h1>
Welcome to Next.js!を自由に編集して、自分好みのメッセージに変更してみてください。
変更を保存すると、ブラウザのlocalhost:3000がホットリロード機能によって自動的にコンパイルされたことに注意しながら、ブラウザで変更を更新して下さい。
また、静的なファイルを保存するためにはpublicディレクトリを使用します。
静的なファイルを保存したい場合は、publicディレクトリ内にファイルを配置します。
たとえば、「public/images」ディレクトリにlogo.pngというファイルを保存したい場合は、以下のようにします。
// プロジェクトのディレクトリ構造： - pages/ - public/ - images/ - logo.png
保存したファイルは、localhost:3000のルートディレクトリからの相対パスでアクセスすることができます。つまり、/images/logo.pngのようなURLでファイルにアクセスすることができます。
例えば、次のコードをpages/index.jsファイルに追加すると、public/images/logo.pngが表示されます。
import Image from 'next/image'; function HomePage() { return ( <div> <h1>Welcome to Next.js!</h1> <Image src="/images/logo.png" alt="Logo" width={200} height={200} /> </div> ); } export default HomePage;
上記のコードでは、next/imageを使用して画像を表示しています。src属性には、publicディレクトリからの相対パスを指定し、alt属性やサイズの指定も行っています。
このようにして、publicディレクトリ内の静的なファイルをNext.jsアプリケーションで利用することができます。
フォルダ構成
フォルダ構造に関する規則はございません。
自由に構成する事が可能となります。
初期構成では、以下のように配置されています。
各ファイルの名前は、ブラウザのURLパスと一致する必要はありません。
Next.jsでは、pagesディレクトリ内のファイルがルーティングの役割を果たします。例えば、「/pages/articles.js」というファイルがある場合、そのファイルは/articlesというURLパスに対応します。
/pages/articles.js
アプリケーションのソースコードに変更が加えられた場合、Next.jsは自動的に変更を検知し、ページを再ビルドして更新します。この機能により、変更が即座に反映され、アプリの状態が失われることはありません。
つまり、コード内で何からしらの変更をした際、アプリの状態は失われずに即座に自動的にページを反映させます。
・ pages/ ページのルート
最も頻繁に作業するフォルダはこのpagesです。
Nextでは、.js拡張子ファイル内部で定義されたすべてのファイルであるpagesが同様の名前のルートにマップされます。
実際のページ以外のもの(テストコンポーネントなど)を下に置かないことだけとなります。
これは、Next.jsが実際のページとしてバンドルして展開するためとなります。
・ pages/api
APIルートでありアプリケーションのAPIにアクセスするために必要なすべてのコードが含まれます。
つまり、ページではなくAPIルートとして扱います。
他のAPIルート構成を行ったり、追加のカスタムサーバーコードを記述したりすることなく、バックエンド コードを記述し、アプリケーションにビジネスロジックを追加できます。
APIルートが機能するためには、各ファイルは2つのパラメーター(要求オブジェクトと応答オブジェクト)を受け入れる関数をデフォルトとしてエクスポートする必要があります。
・ public/
Next.jsで画像などのアセットを提供するには、それらをpublicディレクトリ内に配置する必要があります。
注意点は、ドメインで公開される静的コンテンツ設定にコードやファイルを入れないようにして下さい。
・ styles/
スタイルに関するCSSファイルは初期構成から入っております。
styles/globals.cssは自動的に読み込まれます。
ですので、アプリケーション内すべてのページに反映したいスタイルとなります。
styles/Home.module.cssファイルはインポートして使用したファイル間でのクラス名の衝突を回避します。
Sassプリプロセッサを使用する場合はNextがSassとのシームレスな統合を提供してくれます。
Sassをインストールし、デフォルトのスタイルファイルに.scssまたは.sass拡張子を置換してあげるだけとなります。
npm install sass --save-dev or yarn add sass --dev
next.config.jsファイルはeslintrc –eslint構成のカスタマイズ設定となります。
つまり、ビルドシステム動作の変更をしたり、Next.jsの機能を拡張したり、ENV変数を追加したりする場合はnext-config.jsファイルで簡単に実行が可能となります。
Core Web Vitalsに対しコードベースを検証するようにリンターを構成し、追加のプラグインを使用して拡張します。
ディレクトリ構成する際は例えば一般的には以下のようにします。
/public ├ favicon.ico src/ ├ components/elements/
上記のように実際のアプリ関連のコードとそうでないコードがより明確にさせるように構成します。
Next.jsに適したフォルダ構造を自分で探したり、考えたりするのがごく一般的です。
以下ではここより詳しく解説しておりますので、参考にしてみて下さい。
ルーティングシステム・別ページ作成
Next.jsではページルートとAPIルートの2種類のルートがあります。
pagesディレクトリにJavaScriptファイルを作成するだけで自動的にルートに変換されルーティングされるので簡単にページを追加することが容易となります。
pagesディレクトリの下にabout.jsファイルを作成します。
// pages/about.js export default function About() { return <h1>About Pageです</h1>; }
次にhttp://locallhost: 3000/Aboutページを開きアクセスすると以下の画像のようにページが表示されます。
このようにルーティングの設定を何もしなくても、非常に簡単にページ作成が容易となっております。
では、もう一つのAPIルートをやっていきましょう。
pages/api /フォルダにtimer.jsファイルを作成します。
ファイル内は以下のように記述下さい。
// pages/api/timer.js export default function handler(req, res) { res.status(200).json({ time: (new Date()).toLocaleTimeString() }) }
このコードでは、APIハンドラーが分離され、リクエストオブジェクトとレスポンスオブジェクトにアクセスできるようになっています。
開発モードでサーバーを起動し、ブラウザでhttp://localhost:3000/api/timerにアクセスすると、以下のようなJSONの応答が返されます。
{"time": "現在の時刻"}
このように、リクエストオブジェクトとレスポンスオブジェクトにアクセスが可能となります。
ルーティングのさらに詳しい詳細については、Next.jsの公式ドキュメントを参照して下さい。Next.js by Vercel - The React Framework for the Web
サーバーレスなアプリを構築する方向けにNext.jsではpages/フォルダ内の各ページがスタンドアロンのラムダ関数に変換されるサーバーレスデプロイメントモデルをサポートしております。
Next.jsでのサーバレスモードを有効化にするには
next.config.jsにビルドターゲットを追加する必要があります。
module.exports = {
target: 'serverless'
}
当記事のNext.jsの次のステップは以下となります。
最後に
Next.jsは素晴らしいフレームワークです。
開発者エクスペリエンスを向上させるだけでなく、パフォーマンスとユーザーエクスペリエンスを重視したアプリケーションを簡単に作成できます。
Next.jsを使うと、外部APIからデータを取得し、それをページに表示するというタスクも簡単に実現できます。さらに、Next.jsの最新バージョンでは、開発者にとって非常に便利なツールが提供されています。
Next.jsはAPIを活用したアプリケーションを構築するために必要なすべての要素を備えています。また、静的HTMLサイトを生成することも可能なため、コンテンツのみで構成されるプロジェクトには特に適しています。例えば、ブログや企業サイトなどです。
以上がNext.jsについての概要です。
読んでいただきありがとうございました。
今後の学習に役立てていただければ幸いです。
