ローカルにLinux鯖立てて、Windowsから接続して開発している私が、
Next.jsで設定する際にやっていることを紹介（メモ用なので、覚え書き程度）
環境設定？そんなのAIに聞いとけ
なお、便宜上プロジェクト名は「my-app」とします。
- npx create-next-app@latest my-app
- cd my-app
- SSLの設定
- npm install openssl
- openssl genrsa -out local-ssl-proxy.key 2048
- openssl req -new -key local-ssl-proxy.key -out local-ssl-proxy.csr
- openssl x509 -req -days 365 -in local-ssl-proxy.csr -signkey local-ssl-proxy.key -out local-ssl-proxy.crt
- npm install –save-dev local-ssl-proxy
- npm install concurrently
- package.jsonの書き換え
これで、一通りの設定が完了するので、
npm run devで起動して確かめよう
create-next-app
解説は別ページでやるとして、ひとまずどのように設定したのかだけ、解説
コマンドを打ったら選択肢が出てくるので、初めから
TypeScript：No,
ESLint：Yes,
Tailwind CSS：No,
src/ directory：Yes,
App Router：Yes,
Turbopack：Yes,
import alias：No
の順番で選択
この時点のファイル構造
my-app
|-node_modules
| |-モジュールフォルダがいっぱい
|-public
| |-画像ファイル（.svc）がそこそこ
|-src
| |-app
| |-fonts
| |-favicon.ico //初期ファビコン
| |-globals.css //全体用CSS
| |-layout.js //フォントやメタデータ設定用
| |-page.js //メインのルートページ
| |-page.module.css//page.jsで使ってるCSS
|-jsconfig.json
|-next.config.mjs
|-package.json
|-package-lock.json
|-README.mdAIに渡すなら、
my-app
|- node_modules
|- public
|- src
| |- app
| |- fonts
| |- favicon.ico
| |- globals.css
| |- layout.js
| |- page.js
|- jsconfig.json
|- next.config.mjs
|- package.json
|- package-lock.json
|- README.md
で十分です。
SSL設定
SSL設定について、解説（OpenSSLはインストール済みであること）
- openssl genrsa -out local-ssl-proxy.key 2048
- openssl req -new -key local-ssl-proxy.key -out local-ssl-proxy.csr
- openssl x509 -req -days 365 -in local-ssl-proxy.csr -signkey local-ssl-proxy.key -out local-ssl-proxy.crt
- npm install –save-dev local-ssl-proxy
この辺りで、SSL（http→https）の設定をやってます。
色々聞かれるけど、基本的にすべてEnterを連打すればOK
package.jsonの書き換え
完了後（プロキシのインストール後）に、
"dev": "next dev --turbopack --hostname 0.0.0.0 --port 3000",
"start:dev": "concurrently \"next dev --turbopack --hostname 0.0.0.0 --port 3000\" \"local-ssl-proxy --source 8443 --target 3000 --key local-ssl-proxy.key --cert local-ssl-proxy.crt\"",package.jsonのdevをこれに置き換え、ローカルへの公開とポートの指定、SSL実行用（start:dev）の追加を行う。
ちなみに、start:devは、開発鯖とSSLプロキシ鯖を別々で起動する必要があったために追加してます。
Web3系だと、ローカルでもSSL証明必須なので、設定しておきましょう……