Next.js

Next.js

〜 VS Code でリモート開発〜

✙

2026-04-20 作成福島

0. 前置き

TypeScript と React.js の次は Next.js が流行しているらしい。

本稿は、Next.js を Linux で動作させ、そこに VS Code でリモート接続する環境を作成します。
これにより、IDE で Next.js のコーディングおよびデバッグがリアルタイムにできるようになります。

Next.js (Node.js) は LXC にインストールしています。ここを参考に LXC を作成しておいてください。
(ふつうの Linux にもインストールできます。そのときは「1. parent でポート転送」を省略してください)

動作環境

サーバ名 IP アドレス:ポート OS / ミドルウェア備考

parent 192.168.11.6:3000,3022 AlmaLinux release 10.1 本稿記述時の最新版

nextjs 10.0.3.24:22 AlmaLinux release 10.1 (LXC)

- Node.js v22.22.0

10.0.3.24:3000 Next.js 16.2.4

クライアント

種別名称バージョン備考

基本ソフト Microsoft Windows11 pro 25H2 本稿記述時の最新版

IDE Microsoft Visual Studio Code 1.116.0

Web ブラウザ Mozilla Firefox 149.0.2
Google Chrome 147.0.7727.102

1. parent でポート転送 (LXC の場合)

クライアントが parent のポートへ接続してきたら nextjs のポートへ転送する設定。
(Next.js のデフォルトポートは 3000/tcp となっている)

PC → parent:3000 → nextjs:3000 Next.js に接続

→ parent:3022 → nextjs:22 ssh に接続 (デバッグ時のトンネリングもこちら)

parent:$ su
parent:# firewall-cmd --permanent --add-forward-port=port=3000:proto=tcp:toport=3000:toaddr=10.0.3.24
parent:# firewall-cmd --permanent --add-forward-port=port=3022:proto=tcp:toport=22:toaddr=10.0.3.24
parent:# firewall-cmd --reload
parent:# firewall-cmd --list-forward-ports
port=3000:proto=tcp:toport=3000:toaddr=10.0.3.24  
port=3022:proto=tcp:toport=22:toaddr=10.0.3.24
parent:# exit
parent:$

2. Next.js のインストール

2-1. Next.js のデフォルトポートを許可する。
nextjs:$ su
nextjs:# firewall-cmd --permanent --add-port=3000/tcp --zone=public
nextjs:# firewall-cmd --reload
nextjs:# firewall-cmd --list-ports
3000/tcp
2-2. Node.js をインストールする。

nextjs:# dnf install -y nodejs
nextjs:# node -v

v22.22.0

nextjs:# exit
nextjs:$

2-3. Next.js のプロジェクトディレクトリを作成する。
Next.js のスケルトンが作成される。

nextjs:$ npx create-next-app@latest
(バージョンを指定するには create-next-app@16.2.4 等とする)
Need to install the following packages:
create-next-app@16.2.4
Ok to proceed? (y) y ⏎

? What is your project named? > my-app ⏎
? Would you like to use the recommended Next.js defaults? > 
 - Use arrow-keys. Return to submit.
>   Yes, use recommended defaults ⏎
    TypeScript, ESLint, No React Compiler, Tailwind CSS,
    No src/ directory, App Router, AGENTS.md
    No, customize settings
    Choose your own preferences

Creating a new Next.js app in /home/who/my-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- next
- react
- react-dom

Installing devDependencies:
- @tailwindcss/postcss
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss
- typescript

added 359 packages, and audited 360 packages in 34s

143 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Generating route types...
✓ Types generated successfully

Success! Created my-app at /home/who/my-app
オプションが分かっているなら以下でも良い。
$ npx -y create-next-app@latest my-app \
  --ts \
  --eslint \
  --tailwind \
  --no-src-dir \
  --app \
  --import-alias "@/*"
nextjs:$ npm view next version ./my-app/
16.2.4
Next.js のバージョンは 16.2.4 だった。(プロジェクトごとに異なる)
• 作成されたスケルトンはファイルが多すぎて、確認が現実的でない。

nextjs:$ LANG=C tree ./my-app/ | wc -l
22180
ファイル数が 22,180 とは凄い。
1 ファイルにつき 1 秒で確認しても 6 時間以上を要する。
nextjs:$ ls -ogh ./my-app/
合計 276K
-rw-r--r--.   1  327  4月 13 13:46 AGENTS.md
-rw-r--r--.   1   11  4月 13 13:46 CLAUDE.md
-rw-r--r--.   1 1.5K  4月 13 13:46 README.md
drwxr-xr-x.   2   78  4月 13 13:46 app
-rw-r--r--.   1  465  4月 13 13:46 eslint.config.mjs
-rw-r--r--.   1  247  4月 13 13:46 next-env.d.ts
-rw-r--r--.   1  133  4月 13 13:46 next.config.ts
drwxr-xr-x. 291  12K  4月 13 13:46 node_modules
-rw-r--r--.   1 223K  4月 13 13:46 package-lock.json
-rw-r--r--.   1  528  4月 13 13:46 package.json
-rw-r--r--.   1   94  4月 13 13:46 postcss.config.mjs
drwxr-xr-x.   2   91  4月 13 13:46 public
-rw-r--r--.   1  666  4月 13 13:46 tsconfig.json
nextjs:$ ls -ogh ./my-app/app/page.tsx
-rw-r--r--. 1 2.9K  4月 13 14:17 ./my-app/app/page.tsx
2-4. HMR (Hot Module Replacement) の待ち受けアドレスを記述する。
開発時のみ。npm run build/start の場合は不要。

nextjs:$ vim ./my-app/next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  allowedDevOrigins: ['*.example.jp', '192.168.*.*']
};

export default nextConfig;
allowedDevOrigins のリストに、自分のアドレスを追記する。(なければ新規作成)
今回はポート転送をしているため、parent のアドレスを記述する必要がある。
2-5. サンプル (スケルトン) をそのまま実行する。
nextjs:$ npm run dev --prefix ./my-app/
> my-app@0.1.0 dev
> next dev

▲ Next.js 16.2.4 (Turbopack)
- Local:         http://localhost:3000
- Network:       http://10.0.3.24:3000
✓Ready in 967ms
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in
 this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

 GET / 200 in 680ms (next.js: 352ms, application-code: 328ms)
    停止させるには  を入力する (下記 2-6 を確認後)
2-6. サンプルを確認する。

Web ブラウザで http://192.168.11.6:3000/ をアクセスする。

和訳:
page.tsx ファイルを編集して開始してください。
出発点やさらなる説明を探していますか？
テンプレートや学習センターを見てください。

3. Web ページの作成

作成したプロジェクトディレクトリの中で作業する。
nextjs:$ cd ./my-app/

3-1. Web ページの Body を作成する。
nextjs:/my-app/$ cat > ./app/page.tsx << EOF
"use client";
export default function Home() {
    return <>
      Hello, Next.js
      <button onClick={() => alert("You clicked me.")}>[Click Me]</button>
    </>;
}
EOF

Next.js は、<プロジェクトディレクトリ>/app/page.tsx の default function を最初に呼び出す。

ここでは (サンプルに倣い) export default function Home() という関数を定義しているが、
重要なのは関数名 Home ではなく、(命名規則に則っていれば) どのような名称でも構わない。
また、page.tsx において、default function はひとつでなければならない。
複数記述すると、実行時にエラーとなる。
3-2. Web ページのタイトルと説明を変更する。
nextjs:/my-app/$ vim ./app/layout.tsx
……
const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Hello, Next.js",      // <-- 変更  
  description: "The greeting",  // <-- 変更  
};

export default function RootLayout({
  children,
……
3-3. favicon.ico を削除する。(実は名前変更だけど)

nextjs:/my-app/$ mv ./app/favicon.ico ./app/favicon.ico.org

3-4. カレントディレクトリの Next.js をサーバとして起動する。

nextjs:/my-app/$ npm run dev
nextjs:/my-app/$ cd
nextjs:$

3-5. 表示を確認する。

Web ブラウザで http://192.168.11.6:3000/ をアクセスする。

Firefox は http の場合にローカルアドレスでも警告が表示される。

Chrome は favicon.ico を取得できない場合、
独自の地球儀アイコンをタイトルに表示する。

4. じゃんけんプレイヤーの実装

4-1. Next.js のプロジェクトディレクトリを作成する。
nextjs:$ npx -y create-next-app@latest janken \
  --ts \
  --eslint \
  --tailwind \
  --no-src-dir \
  --app \
  --import-alias "@/*"
4-2. HMR (Hot Module Replacement) の待ち受けアドレスを記述する。
開発時のみ。npm run build/start の場合は不要。

nextjs:$ vim ./janken/next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  allowedDevOrigins: ['*.example.jp', '192.168.*.*']
};

export default nextConfig;
allowedDevOrigins のリストに、自分のアドレスを追記する。(なければ新規作成)
今回はポート転送をしているため、parent のアドレスを記述する必要がある。
4-3. Web ページの Body を作成する。
nextjs:$ cat > ./janken/app/page.tsx << EOF
"use client";

import { useState } from "react";

const HANDS = [
  "R", // Rock     グー
  "P", // Paper    パー
  "S", // Scissors チョキ
] as const;

const buttonStyle = \`
  w-fit
  px-4 py-2
  bg-gray-200
  text-black
  rounded-md
  border-b-2 border-gray-400
  active:border-b-0 active:translate-y-[2px]
\`;

export default function Home() {
  const [result, setResult] = useState("じゃんけん…");

  const handleClick = () => {
    const hand = HANDS[Math.floor(Math.random() * 3)];
    setResult(hand);
  };

  return (
    <div style={{ textAlign: "center" }}>
      <div>{result}</div>
      <button onClick={handleClick} className={buttonStyle}>ポン</button>
    </div>
  );
}
EOF
4-4. Next.js を実行する。

nextjs:$ npm run dev --prefix ./janken/

Web ブラウザで http://192.168.11.6:3000/ をアクセスする。

5. VS Code と接続

5-1. ssh の接続を準備する。
公開鍵を作成し Linux に登録することにより、Windows の ssh クライアントからパスワードなしでログインできるようにする。
また、VS Code の拡張機能「Remote - SSH」には Linux 側に tar が必要なので、もし無ければインストールしておく。
(LXC を最小構成で使用すると tar が無いことが多い)
− □ ×

>_ Windows PowerShell × + | ∨
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows  

PS C:\> # OpenSSH のバージョンを確認する
PS C:\> ssh -V ⏎
OpenSSH_for_Windows_9.5p2, LibreSSL 3.8.2

PS C:\> # 公開鍵ペアを作成する
PS C:\> mkdir "$env:USERPROFILE\.ssh\" -Force ⏎
PS C:\> ssh-keygen -t ed25519 -f "$env:USERPROFILE\.ssh\id_ed25519" --% -N "" ⏎
Generating public/private ed25519 key pair.
Your identification has been saved in C:\Users\who\.ssh\id_ed25519
Your public key has been saved in C:\Users\who\.ssh\id_ed25519.pub
The key fingerprint is:
SHA256:AxehgTfqfsHWguSeOD56V43Kgmq4zql8UWp2k3JGfxM who@pc
The key's randomart image is:
+--[ED25519 256]--+
|     .. o.       |
|    . oo .       |
|     oo..        |
|    oo o E       |
|   +*oooS..      |
|   *+**.++       |
|. o=*=.+. .      |
|+.B.* +          |
|O@o+ o           |
+----[SHA256]-----+

PS C:\> # 公開鍵を確認する -- A
PS C:\> type "$env:USERPROFILE\.ssh\id_ed25519.pub" ⏎
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIczpHzpIOD6bMEzzQw+ZSAtJ3rKlezWmN7DLZiUpg/HW who@pc

PS C:\> # Next.js サーバにログインする
PS C:\> ssh -p 3022 admin@192.168.11.6 ⏎
The authenticity of host '[192.168.11.6]:3022 ([192.168.11.6]:3022)' can't be established.
ED25519 key fingerprint is SHA256:fJLWiDTskZsg4X6dqT4g5lRs9CTLGLBMjAtn29gyPuE.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes ⏎
Warning: Permanently added '[192.168.11.6]:3022' (ED25519) to the list of known hosts.
admin@192.168.11.6's password: password ⏎
Last login: Sat Apr 18 08:58:52 2026 from 192.168.11.140

[admin@nextjs ~]$ # 公開鍵を設置する (上記 A で確認した公開鍵)
[admin@nextjs ~]$ mkdir -p ~/.ssh/ ; chmod 700 ~/.ssh/ ⏎
[admin@nextjs ~]$ touch ~/.ssh/authorized_keys ; chmod 644 ~/.ssh/authorized_keys ⏎
[admin@nextjs ~]$ cat >> ~/.ssh/authorized_keys << EOF
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIczpHzpIOD6bMEzzQw+ZSAtJ3rKlezWmN7DLZiUpg/HW who@pc
EOF ⏎

[admin@nextjs ~]$ # tar をインストールする (VS Code 用)
[admin@nextjs ~]$ sudo dnf install -y tar ⏎

[admin@nextjs ~]$ exit ⏎
PS C:\> exit ⏎
5-2. VS Code をインストールする。

VS Code の Web ページから Windows 10,11 をクリックしインストーラをダウンロード＆インストールする。
今回は VSCodeUserSetup-x64-1.116.0.exe だった。

◉同意する(A) を選択してボタンをクリックする。
⇓
インストールするフォルダを確認してボタンをクリックする。
⇓
ボタンをクリックする。
⇓
☑ デスクトップ上にアイコンを作成する(D)
にチェックを入れてボタンをクリックする。
⇓
ボタンをクリックする。
⇓
待つ。
⇓
☐ Visual Studio Code を実行する
のチェックを外してボタンをクリックする。

5-3. VS Code に拡張機能をインストールする。
• 上記 5-2 でインストールした VS Code を起動し、拡張機能をインストールする。
← ダブルクリックで起動する

メニューが英語のままなら、以下の操作を実施する。
VS Code: メニュー > View > Command Palette... Ctrl+Shift+P
 ← 入力する。
→ 日本語 (ja) 選択する。
 →  ボタンが表示されるのでこれをクリックする。
• 拡張機能をインストールする。

VS Code: メニュー > 表示(V) > 拡張機能 (Ctrl+Shift+X)

検索: Remote - SSH →
5-4. Next.js サーバへの接続構成を作成する。

VS Code: メニュー > 表示(V) > コマンドパレット... (Ctrl+Shift+P)

検索: Remote-SSH

選択 →

選択 →

記入 → ssh -p 3022 admin@192.168.11.6

選択 →

選択 →

5-5. Next.js サーバへ接続する。

VS Code: メニュー > 表示(V) > コマンドパレット... (Ctrl+Shift+P)

検索: Remote-SSH

選択 →

選択 →

切断はこちら

検索: Remote: Close

選択 →

• 接続後の画面 (ここでは page.tsx を表示している)

6. VS Code から Next.js を起動

6-1. VS Code からターミナルを開く。

VS Code: メニュー > 表示(V) > ターミナル (Ctrl+@)

6-2. ターミナルから Next.js を起動する。
○[admin@nextjs ~]$ npm run dev --prefix ./janken/ ⏎

> janken@0.1.0 dev
> next dev

▲ Next.js 16.2.4 (Turbopack)
- Local:         http://localhost:3000
- Network:       http://10.0.3.24:3000
✓Ready in 774ms

 GET / 200 in 493ms (next.js: 267ms, application-code: 226ms)
    停止させるには  を入力する
⇓
Web ブラウザで http://192.168.11.6:3000/ を表示する。

VS Code で page.tsx を保存 () すると Next.js の HMR により、実行画面に自動反映される。

自動保存を ON にすると、手動でをせずに自動反映させることもできる。
→ VS Code: メニュー > ファイル(F) > ✓自動保存

7. ソースコードデバッグ

クライアント側のソースコードデバッグは Google Chrome (Edge を含む) で実施可能。
(Firefox だと Next.js の source-map を受け取れないためブレークポイントを設置できない。その場合はブラウザのから DevTools を使用する)

7-1. デバッグ構成ファイルを作成する。
プロジェクトディレクトリに launch.json を作成する。

nextjs:$ mkdir -p .vscode/
nextjs:$ cat > .vscode/launch.json << EOF
{
  "version": "0.2.0",
  "configurations": [
    {
      "request": "launch",
      "name": "Next.js debug",
      "type": "chrome", // Chrome を対象にする
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
EOF
7-2. VS Code の「ターミナル」から Next.js を起動する。
○[admin@nextjs ~]$ npm run dev --prefix ./janken/ ⏎

> janken@0.1.0 dev
> next dev

▲ Next.js 16.2.4 (Turbopack)
- Local:         http://localhost:3000
- Network:       http://10.0.3.24:3000
✓Ready in 663ms

 GET / 200 in 7.3s (next.js: 7.1s, application-code: 283ms)
    停止させるには  を入力する
7-3. デバッグを開始する。

VS Code: メニュー > 実行(R) > デバッグの開始 F5

Google Chrome の画面

↓ この画面はボタンの処理にブレークポイントを置いて停止させたところ。(25 行目)

ブレークポイントに例外を含むと不要な例外で停止するので、適宜チェックを外すこと。[ 赤枠 ]

サーバ名	IP アドレス:ポート	OS / ミドルウェア	備考
parent	192.168.11.6:3000,3022	AlmaLinux release 10.1	本稿記述時の最新版
nextjs	10.0.3.24:22	AlmaLinux release 10.1 (LXC)
	-	Node.js v22.22.0
	10.0.3.24:3000	Next.js 16.2.4

種別	名称	バージョン	備考
基本ソフト	Microsoft Windows11 pro	25H2	本稿記述時の最新版
IDE	Microsoft Visual Studio Code	1.116.0
Web ブラウザ	Mozilla Firefox	149.0.2
Web ブラウザ	Google Chrome	147.0.7727.102

PC	→	parent:3000	→	nextjs:3000	Next.js に接続
PC	→	parent:3022	→	nextjs:22	ssh に接続 (デバッグ時のトンネリングもこちら)

検索:	Remote-SSH
選択 →
選択 →
記入 →	ssh -p 3022 admin@192.168.11.6
選択 →
選択 →