【Next.js】npx create-next-app時の回答で変わるフォルダ構成

npx create-next-app をするとき、「src(またはapp)を使いますか」と聞かれたので、フォルダ構成がどう変わるのか気になって調べてみました。

srcをYesにした場合

$ npx create-next-app test --ts --use-npm
✔ Would you like to use `src/` directory with this project? => Yes
✔ Would you like to use experimental `app/` directory with this project? => No

フォルダ構成

src/pagesの中にapiフォルダ、_app.tsx、_document.tsx、index.tsxがある。

$ tree -L 2
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
│   ├── ...(略)...
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── next.svg
│   ├── thirteen.svg
│   └── vercel.svg
├── src
│   ├── pages
│	├── _app.tsx
│	├── _document.tsx
│       ├── api
│       └── index.tsx
│   └── styles
└── tsconfig.json

246 directories, 10 files

appをYesにした場合

$ npx create-next-app test --ts --use-npm
✔ Would you like to use `src/` directory with this project? => No
✔ Would you like to use experimental `app/` directory with this project? => Yes

フォルダ構成

appにpages.tsxなどが追加される

$ tree -L 2
.
├── README.md
├── app
│   ├── globals.css
│   ├── head.tsx
│   ├── layout.tsx
│   ├── page.module.css
│   └── page.tsx
├── next-env.d.ts
├── next.config.js
├── node_modules
│   ├── ...(略)...
├── package-lock.json
├── package.json
├── pages
│   └── api
├── public
│   ├── favicon.ico
│   ├── next.svg
│   ├── thirteen.svg
│   └── vercel.svg
└── tsconfig.json

246 directories, 15 files

どちらもNoにしたとき

$ npx create-next-app test --ts --use-npm
✔ Would you like to use `src/` directory with this project? => No
✔ Would you like to use experimental `app/` directory with this project? => No

フォルダ構成

これまで通り、pagesにindex.tsx, _app.tsx, _document.tsxができる。

$ tree -L 2
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
│   ├── ...(略)...
├── package-lock.json
├── package.json
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── api
│   └── index.tsx
├── public
│   ├── favicon.ico
│   ├── next.svg
│   ├── thirteen.svg
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── tsconfig.json

246 directories, 15 files

どちらもYesにしたとき

✔ Would you like to use `src/` directory with this project? => Yes
✔ Would you like to use experimental `app/` directory with this project? => Yes

フォルダ構成

src/appの中にpages.tsxなどができる。

$ tree -L 2
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
│   ├──...(略)...
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── next.svg
│   ├── thirteen.svg
│   └── vercel.svg
├── src
│   ├── app
│   │   ├── globals.css
│   │   ├── head.tsx
│   │   ├── layout.tsx
│   │   ├── page.module.css
│   │   └── page.tsx
│   └── pages
│       └── api
└── tsconfig.json

246 directories, 10 files