初めに
Next.js初心者が、作成したアプリケーションをVercelで公開した時の、作業記録。今回は、アプリのもとになるフォルダ構成を作成するまで
環境
・Windows 11 Home
・Node.js v22.13.1
・git version 2.47.1.windows.2
記事の目次
１）Next.js アプリケーションの作成方法
２）Next.js のフォルダ構成
３）GitHubと連携
４）Vercelと連携
５）最後に
1) Next.jsアプリケーションの作成
1. 作業フォルダにて、以下コマンドを実行。
npx create-next-app --typescript
すると、以下の選択肢が出てくる。
以下に一つずつ詳細を記載。
Need to install the following packages:
create-next-app@15.4.6
Ok to proceed? (y) y
√ What is your project named? ... reading-record
√ Would you like to use ESLint? ... No / <mark>Yes</mark>
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for `next dev`? ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in C:{作業フォルダ}\reading-record.
各設定の説明は以下の記事にて解説いただいている。
https://qiita.com/kaba_san/items/302b8b731e7fbfa56367
TurboPackについてのみNext.js v14.2?からの追加機能のようで記載がないため、以下を参照。（よくわからん）
https://nextjsjp.org/docs/app/api-reference/turbopack
1.2. 動作確認
1.2.1. 以下コマンド実行
C:\Users\henna\Apps\reading-record>npm run dev
> reading-record@0.1.0 dev
> next dev --turbopack
▲ Next.js 15.4.6 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.11.5:3000
✓ Starting...
✓ Ready in 930ms
○ Compiling / ...
✓ Compiled / in 1526ms
GET / 200 in 1785ms
✓ Compiled /favicon.ico in 108ms
GET /favicon.ico?favicon.45db1c09.ico 200 in 372ms
→とりあえずローカルホストでは動いたのを確認
2. Next.js のフォルダ構成
2.1. 作成後のフォルダ構成は以下。
C:\Users\henna\Apps\reading-record のディレクトリ
2025/08/14 13:15 <DIR> .
2025/08/14 13:15 <DIR> ..
2025/08/14 13:03 480 .gitignore
2025/08/14 13:15 <DIR> app
2025/08/14 13:03 393 eslint.config.mjs
2025/08/14 13:03 211 next-env.d.ts
2025/08/14 13:03 133 next.config.ts
2025/08/14 13:15 <DIR> node_modules
2025/08/14 13:15 213,139 package-lock.json
2025/08/14 13:15 582 package.json
2025/08/14 13:03 81 postcss.config.mjs
2025/08/14 13:15 <DIR> public
2025/08/14 13:03 1,450 README.md
2025/08/14 13:15 598 tsconfig.json
9 個のファイル 217,067 バイト
5 個のディレクトリ 352,929,701,888 バイトの空き領域
2.2. 名前で機能がわからなかったやつ↓
2.1.2 app
ソースコードのエントリポイント
2.1.4 next-env.d.ts
ここに記事があるが、意識しなくてよさそう
https://qiita.com/282Haniwa/items/ff3fc9cd783f6f418a35
2.1.5 next.config.ts
Next.js の設定ファイル
以下に記事あり。
https://qiita.com/free-honda/items/47bcb1ce0042489f1738
2.1.9 postcss.config.mjs
postcss？の設定ファイル。TailWind CSSがpostcssのプラグインとしてインストールされているからこのファイルがある？
https://tailwindcss.com/docs/installation/using-postcss
2.1.10 public
画像ファイルなどの静的ファイルを配信できる。ベースURLから始まるコードで参照できる
https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/static-file-serving
2.1.12 tsconfig.json
typescript の設定ファイル
https://qiita.com/crml1206/items/8fbfbecc0b40968bfc42
3. GitHubと連携
3.1. リポジトリの作成
・Githubにログインし、新しいリポジトリを作成
・リポジトリ名と、非公開にするため、visibility を Private に設定
3.2. リポジトリにプッシュ
・cretae時に、すでにinit ~ commit まで済んでいるようだが、commit の Author 情報を更新したかったので amend で上書き
C:\Users\henna\Apps\reading-record>git log
commit bcc6381f9c9980454a346de6a265920dbd2fcba0 (HEAD -> master)
Author: hoge <hogehoge@gmail.com>
Date: Thu Aug 14 13:15:20 2025 +0900
Initial commit from Create Next App
C:\Users\henna\Apps\reading-record>git commit --amend --author="henna <hennaikimono0318@gmail.com>" -m "first commit"
[master ee88352] first commit
Date: Thu Aug 14 13:15:20 2025 +0900
17 files changed, 6476 insertions(+)
create mode 100644 .gitignore
create mode 100644 README.md
create mode 100644 app/favicon.ico
create mode 100644 app/globals.css
create mode 100644 app/layout.tsx
create mode 100644 app/page.tsx
create mode 100644 eslint.config.mjs
create mode 100644 next.config.ts
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 postcss.config.mjs
create mode 100644 public/file.svg
create mode 100644 public/globe.svg
create mode 100644 public/next.svg
create mode 100644 public/vercel.svg
create mode 100644 public/window.svg
create mode 100644 tsconfig.json
C:\Users\henna\Apps\reading-record>git log
commit ee883521635f0904f56f23d3bce22de06195879c (HEAD -> master)
Author: henna <hennaikimono0318@gmail.com>
Date: Thu Aug 14 13:15:20 2025 +0900
first commit
・GithubのリポジトリURLを remote のoriginに設定
C:\Users\henna\Apps\reading-record>git remote add origin https://github.com/henna0318/readingRecord.git
C:\Users\henna\Apps\reading-record>git remote -v
origin https://github.com/henna0318/readingRecord.git (fetch)
origin https://github.com/henna0318/readingRecord.git (push)
・local の master ブランチと、remote の origin を紐づけてからpush
C:\Users\henna\Apps\reading-record>git push --set-upstream origin master
Enumerating objects: 21, done.
Counting objects: 100% (21/21), done.
Delta compression using up to 24 threads
Compressing objects: 100% (21/21), done.
Writing objects: 100% (21/21), 60.20 KiB | 10.03 MiB/s, done.
Total 21 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
To https://github.com/henna0318/readingRecord.git
* [new branch] master -> master
branch 'master' set up to track 'origin/master'.
C:\Users\henna\Apps\reading-record>git push
Everything up-to-date
・できた
4. Vercel と連携
4.1 Vercelアカウントにて、GitHubからプロジェクトをImport・Deploy
・Deploy押下
・完了したらしい
・ダッシュボード
4.2 VercelのURLで確認
最後に
次は、VercelのDBを使用して、これをもとに読書記録アプリを作りたい。