😀

Next.jsデプロイ

2025/01/06に公開

チュートリアル

tech

レシピ：Next.js アプリケーションを作成する手順

GitHubリポジトリを作成する
- リポジトリ名はsample-next.jsとします（任意の名前でも構いません）。
ローカルにクローンする
- ターミナルで以下を実行して、作成したリポジトリをクローンします。
```
git clone https://github.com/{your-username}/sample-next.js
```
リポジトリ直下に移動する
- クローンしたリポジトリに移動します。
```
cd sample-next.js
```
Next.js アプリを作成する
- 以下のコマンドを実行してNext.jsアプリケーションを作成します。
```
npx create-next-app .
```
- コマンド実行中に「Yes(Y)」または「No(N)」を求められた場合、画像の設定に従って回答してください。

ファイルが正しく生成されたか確認する

コマンド実行後、以下のようなファイル構成になっていれば成功です。

$ tree -L 1
.
├── README.md
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
├── src
├── tailwind.config.ts
└── tsconfig.json

3 directories, 9 files

ページコンテンツを編集する

src/app/page.tsxをエディタで開き、以下の内容に書き換えます。

export default function Home() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

ビルドする

以下のコマンドを実行してプロダクションビルドを作成します。
```
npm run build
```

実行結果例：

Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Finalizing page optimization    

Route (app)                              Size     First Load JS
┌ ○ /                                    136 B           105 kB
└ ○ /_not-found                          979 B           106 kB

アプリを起動する
- 以下のコマンドを実行してアプリケーションをローカルサーバーで起動します。
```
npm run start
```
- 実行結果例：
```
Local:        http://localhost:3000
Network:      http://192.168.3.9:3000
```
ブラウザで確認する
- ブラウザでhttp://localhost:3000にアクセスし、以下のように「Hello World」と表示されていれば成功です。
Vercelにデプロイする
- デプロイ手順については、以下の記事を参照してください。
  Vercelにデプロイする方法

レシピ：Next.js アプリケーションを作成する手順

Discussion