やるぞ

node: 20.11.0
next: 14.1.0

https://nextjs.org/docs

とほほ
https://www.tohoho-web.com/ex/nextjs.html#install

App Router

• app フォルダの下でルーティングを設定するよ
• サーバーでレンダリングするのがデフォだよ
• page.tsx っていう子がブラウザに表示されるページだよ
• layout.tsx っていう子がレイアウトを指定するよ

くわしくのってた
https://zenn.dev/yamadadayo123/articles/6cb4f586de0183

いんすこ

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

npx create-next-app@latest

src フォルダの要不要

質問の中で下記のぶぶん

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

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

app 直下のふぁいる

page.tsx

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

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

layout.tsx

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

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

globals.css

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

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

app 直下に自分で生み出すもの

template.tsx

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

https://zenn.dev/cybozu_frontend/articles/8caf1decb1e82c#layoutとtemplateの使い分け方

loading.tsx

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

not-found.tsx

404 not found 画面を設定する

error.tsx

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

global-error

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

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