Zenn
🐍

【1章】Next.jsのチュートリアルをやってみた

2025/01/06に公開
Next.js
tech

これは Next.js の公式チュートリアルの1. Getting Startedをやってみたメモです

前章のメモ

https://zenn.dev/kuuki/articles/nextjs-tutorial-introduction/

Next.js の公式チュートリアルの該当ページ

https://nextjs.org/learn/dashboard-app/getting-started

Next.js のアプリを作成

create-next-app コマンドをインストールします。（インストール済みの方は不要）

// インストールコマンド
// g：PC全体にインストール
$ npm i -g create-next-app

added 1 package in 813ms

// バージョン確認
$ npx create-next-app -V
14.2.1

適当なディレクトリに移動し、↓ のコマンドを実行して Next.js のアプリケーションを作成します

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を使う

（実行結果）

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
│ ├── ui
├── 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 を使うことで型定義ができるので、誤ったデータ形式をコンポーネントやデータベースに渡すことを防げます

開発サーバの起動

先ほど、作成したアプリを起動してみます。

// Next.jsのアプリ内に移動
$ nextjs-dashboard

// パッケージのインストール
$ npm i

// 開発サーバの起動
$ npm run dev

起動できたら、ブラウザからアクセスします。

http://localhost:3000  を開いてください。

↓ の画像のようになっていれば OK です！

次章のメモ

https://zenn.dev/kuuki/articles/nextjs-tutorial-02/

Discussion