今回はNext.jsを使って、基本的なWebアプリケーションを構築するチュートリアルを試してみました。
https://nextjs.org/learn
Next.jsとは？
Next.jsは、フルスタックのWebアプリケーションを構築するためのReactフレームワークです。ユーザーインターフェースを構築するためにReactコンポーネントを使用し、Next.jsは追加の機能や最適化を提供します。
内部的には、Next.jsはReactに必要なツール（バンドリングやコンパイルなど）を抽象化し、自動的に設定します。これにより、設定に時間をかけることなくアプリケーションの構築に集中できます。
個人の開発者でも大規模なチームの一員でも、Next.jsはインタラクティブでダイナミック、かつ高速なReactアプリケーションを構築するのに役立ちます。
システム要件
- Node.js 18.17.0以上がインストールされていること。
- オペレーティングシステム
- macOS、Windows（WSLを含む）、またはLinuxがサポートされています。
- GitHubアカウントとVercelアカウント
第1章
チュートリアルではパッケージマネージャーとしてpnpmが推奨されていたのでインストールします。
npm install -g pnpm
Next.js アプリを作成するには、ターミナルを開き、プロジェクトを保存したいフォルダに移動して、次のコマンドを実行します。
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm
では、実際にプロジェクトを起動してみたいと思います。
最初にプロジェクトのパッケージをインストールします。
pnpm i
開発サーバーを起動します。
pnpm dev
ブラウザで http://localhost:3000 を開くと次のように画面が表示されます。
実行結果:
今回のチュートリアルで使うプロジェクトのファイル構成は次のようになっています。
- /app: アプリケーションのすべてのルート、コンポーネント、およびロジックが含まれています。ここが主に作業する場所です。
- /app/lib: 再利用可能なユーティリティ関数やデータ取得関数など、アプリケーションで使用する関数が含まれています。
- /app/ui: カード、テーブル、フォームなど、アプリケーションのすべてのUIコンポーネントが含まれています。時間を節約するために、これらのコンポーネントはあらかじめスタイリングされています。
- /public: 画像など、アプリケーションのすべての静的アセットが含まれています。
- 設定ファイル: プロジェクトのルートには
next.config.js などの設定ファイルもあります。これらのファイルのほとんどは、create-next-app を使用して新しいプロジェクトを開始すると作成され、事前に設定されています。このコースではこれらを変更する必要はありません。
以上で第1章になります。
第2章では、Next.jsアプリケーションにスタイルを適用する方法について学びます。