AppRouterなNext.jsに入門

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

前回の記事は↓こちら

たまたまプライベートで人に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では<>と</>で囲むとひとまとめにできる
  • フラグメントといいます

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

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

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

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

cd この中に作業フォルダを作るぞっていうフォルダ

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

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

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

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

mkdir C:\Users\ユーザーの名前\AppData\Roaming\npm

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

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

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

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!ではじまる行が出るまで忍耐強くまちます

そのまま動かしてみる

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

cd さっき決めたプロジェクトの名前

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

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

npm run dev

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

コマンドの画面に出てくる（抜粋）

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

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

こういう画面か

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

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

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

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

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

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

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

src/app/page.tsx

import Image from "next/image";

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

保存してみます。

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

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

↓このような画面が

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

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

今回のポイント（再掲）

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