目次

目的

Next.jsでアプリを作成する時の手順のメモと、基本的な情報をまとめておく

はじめに

Node.jsがインストールされていることを確認 
node -v v16.13.0

アプリケーションの新規作成

資材を作成したいディレクトリで以下のコマンドを実行 
-- TypeScriptで実装する場合
npx create-next-app --typescript <プロジェクト名>
-- JavaScriptで実装する場合
npx create-next-app <プロジェクト名>

（参考）App Router vs Pages Router

https://nextjs.org/docs#app-router-vs-pages-router

お試し実行

-- 作成されたディレクトリに移動
cd <プロジェクト名>
-- 実行
npm run dev

ブラウザで「http://localhost:3000/」を開く


フォルダ構成について

├─.next   -- buildで出力されるファイルが格納されている
├─node_modules
├─public        -- 画像ファイル等の静的ファイルを配置するディレクトリ
│      next.svg
│      vercel.svg
│
├─src
│    └─app      -- ルーティングされるファイルを配置するディレクトリ
│      favicon.ico
│      globals.css
│      layout.tsx  -- このディレクトリ配下の画面に適用されるlayoutを定義している
│      page.tsx   -- ファイル名を「page」にするとルーティング対象のファイル となる（※このファイルは「/」にルーティングされる）
│ 
│ .json 
│ .eslintrc.json 
│ .gitignore 
│ next.config.mjs 
│ next-env.d.ts 
│ package.json 
│ package-lock.json 
│ postcss.config.js 
│ README.md 
│ tailwind.config.ts