これはNext.jsの公式チュートリアルの1. Getting Started に関するメモです
前章のメモ
Next.jsの公式チュートリアルの該当ページ
Learn Next.js: Getting Started | Next.js
Create a new Next.js application using the dashboard starter example and explore the project.
nextjs.org
Next.jsのアプリを作成
create-next-app コマンドをインストールします。（インストール済みの方は不要）
|
1 2 3 4 5 6 7 8 9 |
// インストールコマンド // g：PC全体にインストール $ npm i -g create-next-app added 1 package in 813ms // バージョン確認 $ npx create-next-app -V 14.2.1 |
適当なディレクトリに移動し、↓のコマンドを実行してNext.jsのアプリケーションを作成します
|
1 |
npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" |
引数やオプションを表にまとめました
| create-next-app@latest | 最新版のcreate-next-appを使って、Next.jsのアプリを作成 |
| nextjs-dashboard | アプリの名前。 |
| –use-npm | npm を使ってパッケージを管理 |
| –example “https://github.com/vercel/next-learn/tree/main/dashboard/starter-example” | アプリのテンプレートを指定。 starter-exampleを使う |
（実行結果）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
tutorial$ npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" Need to install the following packages: create-next-app@14.2.1 Ok to proceed? (y) y Creating a new Next.js app in /mnt/c/Users/rurua/Desktop/development/Learning/JavaScript/NextJS/tutorial/nextjs-dashboard. Downloading files from repo https://github.com/vercel/next-learn/tree/main/dashboard/starter-example. This might take a moment. Installing packages. This might take a couple of minutes. added 573 packages, and audited 574 packages in 49s 172 packages are looking for funding run `npm fund` for details 1 moderate severity vulnerability To address all issues, run: npm audit fix Run `npm audit` for details. Initialized a git repository. Success! Created nextjs-dashboard at /mnt/c/Users/rurua/Desktop/development/Learning/JavaScript/NextJS/tutorial/nextjs-dashboard Inside that directory, you can run several commands: npm run dev Starts the development server. npm run build Builds the app for production. npm start Runs the built app in production mode. We suggest that you begin by typing: cd nextjs-dashboard npm run dev |
フォルダ構造
作成したアプリのフォルダ構造が↓のようになってます
nextjs-dashboard
├── app
│ ├── lib
│ ├── lui
├── public
├──scripts
├──next.config.js
……
・各フォルダやファイルの役割
| /app | アプリのルートディレクトリ。 ルーティングやコンポーネント、ロジックなどいろいろある。 |
| /app/lib | 再利用可能な関数やデータを取得する関数など、アプリで使う関数が入っている。 |
| /app/ui | UIコンポーネントが入っている。 |
| /public | 画像など静的コンテンツが入っている |
| /scripts | データベースデータを投入するスクリプトが入っている。 |
| Config Files(next.config.js) | アプリの設定ファイル。本チュートリアルで触ることはない |
Placeholder data
APIやデータベースがまだないときにはPlaceholder dataを使用します。
JSON形式やJavaScriptのオブジェクトのように扱えます。
今回のアプリでは、app/lib/placeholder-data.js にて定義されています
のちのち、このデータをデータベースにも投入するみたいです
TypeScript
TypeScriptを使用してアプリを作っていきます。
アプリ内の既存のファイルの拡張子が .ts , .tsx となっていると思います
TypeScriptを使うことで型定義ができるので、誤ったデータ形式をコンポーネントやデータベースに渡すことを防げます
開発サーバの起動
先ほど、作成したアプリを起動してみます。
|
1 2 3 4 5 6 7 8 |
// Next.jsのアプリ内に移動 $ nextjs-dashboard // パッケージのインストール $ npm i // 開発サーバの起動 $ npm run dev |
起動できたら、ブラウザからアクセスします。
http://localhost:3000 を開いてください。
↓の画像のようになっていればOKです！
次章のメモ
コメント