AppRouterなNext.jsに入門


シリーズのトップは↓こちら

https://qiita.com/every-month/items/a6a9f481ac31eb695d25

前回の記事は↓こちら

https://qiita.com/every-month/items/8b26eaf17d4fd9ed43b1

たまたまプライベートで人にTypeScriptでAppRouterなNext.jsを叩き込む機会がありまして、せっかくなので再びこの場をお借りしていっしょに復習します。

## 前前回の復習（再掲）（抜粋）

- `mkdir`
    - フォルダを作る
- `cd`
    - フォルダの中に入る

↑これらはよく使うので慣れると便利です♪

## 今回のポイント

- `npx create-next-app@latest`
    - これでNext.jsのプロジェクトを作る
    - ホームページの例ができる
- `npm run dev`
    - （作ってる途中の）Next.jsを動かす
    - だいたい`http://localhost:3000`で見れる
- `src/app/pages.tsx`
    - ここがページの内容になる
    - これからはここにオリジナリティーを出す
- TSXでは`<>`と`</>`で囲むとひとまとめにできる
    - フラグメントといいます

## 作業フォルダを置く場所に移動する

今回は前回までとはすこしちがった始め方をします。なので前回のフォルダとは別のフォルダで作業します。

作業フォルダ自体はあとで作るので、必要に応じてそのフォルダを置くフォルダに移動します。

```bash:コマンドの画面の>か$か%か#って書いてあるところに入力してエンター
cd この中に作業フォルダを作るぞっていうフォルダ
```

## WindowsでnpxするとENOENTが出る場合が有る件

次のステップでnpxに怒られる場合があるようです。

https://stackoverflow.com/questions/25093276/node-js-windows-error-enoent-stat-c-users-rt-appdata-roaming-npm

このSOによると、そのような場合は

```powershell:コマンドの画面の>か$か%か#って書いてあるところに入力してエンター
mkdir C:\Users\ユーザーの名前\AppData\Roaming\npm
```

このようなコマンドで解決するようです。

## Next.jsのプロジェクトを作る

```bash:コマンドの画面の>か$か%か#って書いてあるところに入力してエンター
npx create-next-app@latest
```

今回は出てきた質問には、こう答えます。

```:コマンドの画面に出てくる。なんか名前を入力してエンター
✔ What is your project named? … プロジェクトの名前
```

プロジェクトの名前を決めます。

次からの質問、ここから

```:コマンドの画面に出てくる。左右矢印ボタンで選んでエンター
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
```

ここまで全部Yesにします。

```:コマンドの画面に出てくる。左右矢印ボタンで選んでエンター
✔ Would you like to customize the default import alias (@/*)? … No / Yes
```

最後だけNoにします

`Success!`ではじまる行が出るまで忍耐強くまちます

## そのまま動かしてみる

```bash:コマンドの画面の>か$か%か#って書いてあるところに入力してエンター
cd さっき決めたプロジェクトの名前
```

Visual Studio Codeを使いたい場合は、Visual Studio Codeで今できたフォルダを開いて、統合ターミナルを出します。
画面の上の方のファイルとか編集とかのあるところのターミナルから新しいターミナルを選ぶと出ます。

```bash:コマンドの画面の>か$か%か#って書いてあるところに入力してエンター
npm run dev
```

ここでファイアウォールのお伺いが出る場合は許可してあげましょう

```:コマンドの画面に出てくる（抜粋）
  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000
```

次はこのコマンドの画面は動かしたままにして、この`http://localhost:3000`をブラウザで開いてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782801/bafe0277-9130-d044-c490-c1ca9bb91afa.png)

こういう画面か

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782801/a16f7ae4-2067-f492-fe46-d7738b3b9185.png)

こういう画面が出るのではないでしょうか。

このような何かNext.jsらしい画面が出ていればOKです🎉

## まずは入門らしいことをしよう

Next.js入門らしくします。

まず`src/app/page.tsx`を開きます。

すごくいっぱい書いてあると思います。`<main`の行と`</main`の行とその間の行をバッサリ消します。

そして入門と言えば「hello world」ですね。`<>`と`</>`で囲んで`hello world`とでも書きます。

```tsx:src/app/page.tsx
import Image from "next/image";

export default function Home() {
  return (
    <>
      hello world
    </>
  );
}
```

保存してみます。

さっきの`npm run dev`を動かしたままであればそのまま、止めていればもう一度動かします。

すると、↓このような画面か

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782801/93b85519-112a-f145-447b-4340139770c1.png)

↓このような画面が

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782801/0809097d-1a12-890d-f3bd-6b8ba5ef06ef.png)

出るのではないでしょうか。つまりhello worldが出ました。OKです🎉

今回はこのくらいにしました✨

## 今回のポイント（再掲）

- `npx create-next-app@latest`
    - これでNext.jsのプロジェクトを作る
    - ホームページの例ができる
- `npm run dev`
    - （作ってる途中の）Next.jsを動かす
    - だいたい`http://localhost:3000`で見れる
- `src/app/pages.tsx`
    - ここがページの内容になる
    - これからはここにオリジナリティーを出す
- TSXでは`<>`と`</>`で囲むとひとまとめにできる
    - フラグメントといいます