やるぞ

node: 20.11.0
next: 14.1.0

App Router

※このコマンドだけで、あとは色々質問してくれてよしなにインスコしてくれる

npx create-next-app@latest

質問の中で下記のぶぶん

Would you like to use `src/` directory? No / Yes

これって何が違うんだろう？
→ メインフォルダである app/が、プロジェクト直下か、src直下かどっちがいいか？？？という違いぽい。ﾅﾙﾎﾄﾞ

http://localhost:3000/にアクセスしたときに一番最初に表示する画面
たしかに関数名はHomeになっているデスね

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
・・・

RootLayout なので、原則全てのページに適応されるレイアウトのこと
この中に、Webアプリのタイトルだったりディスクリプションだったりを指定する部分がある

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

ここで下記を設定しておくと app 全体で tailwind を使うことができるようになる

@tailwind base;
@tailwind components;
@tailwind utilities;

layout とほぼ同じ
→違う部分は、画面遷移時。layout は再レンダリングしないけど template は遷移する度に再レンダリングをする
→なので 基本 layout を使用でOK。もしページ遷移ごとに色々動かしたりしたい場合は template を使う

ロード画面が必要な場合に設定する

404 not found 画面を設定する

エラーページを設定する（page.tsx でのエラー）

エラーページを設定する（layout.tsx や template.tsx でのエラー）

いったんハロワできた！くろーず