この記事は公開から1年以上経過しています。
VSCodeで検証を行うためなどにcreate-next-app後に新しいNext.jsプロジェクトを頻繁に作成する際、毎回テンプレートになるlaunch.jsonファイルをコピーしたり、WEBサイトからコピペするのが億劫でしたので、コードスニペットを作る方法で対応してみましたので紹介します。
もしかすると、何らかのNext.js拡張をインストールしていれば不要かもしれませんが、これだけのため拡張を入れるのもイマイチですので…。
作業手順
- コマンドパレットで
Snippets: Configure User Snippetsを選択。 Select Snippets File or Create Snippetsのリストからjsonc.json (Json with Comments)を選択。-
以下のスニペットを登録(※launch.jsonは2023.10.31時点のNext.js公式に紹介されているもの)。
{ "Create Next.js launch.json file": { "prefix": "nextjs launch.json", "body": [ "{", " \"version\": \"0.2.0\",", " \"configurations\": [", " {", " \"name\": \"Next.js: debug server-side\",", " \"type\": \"node-terminal\",", " \"request\": \"launch\",", " \"command\": \"npm run dev\"", " },", " {", " \"name\": \"Next.js: debug client-side\",", " \"type\": \"chrome\",", " \"request\": \"launch\",", " \"url\": \"http://localhost:3000\"", " },", " {", " \"name\": \"Next.js: debug full stack\",", " \"type\": \"node-terminal\",", " \"request\": \"launch\",", " \"command\": \"npm run dev\",", " \"serverReadyAction\": {", " \"pattern\": \"- Local:.+(https?://.+)\",", " \"uriFormat\": \"%s\",", " \"action\": \"debugWithChrome\"", " }", " }", " ]", "}" ] } }
使い方
空のlaunch.jsonファイルを新規作成してneと入力して、作成したスニペットを選択すると、前手順で作成したNext.jsのスニペットが挿入されます。
ホスト名やポートなどを都度変える場合は、当該項目にプレースホルダを使ったほうが便利です。
参考ウェブサイトなど
-
NEXT.JS Docs
Debugging with VS Code -
Visual Studio Code Docs
Snippets in Visual Studio Code
以上です。