Need to have VSCode settings for a Next.js project

Do you find it difficult to navigate your NextJS project or do you get lost when you are editing multiple pages/routes/layouts/components at once? Look no further!

Custom Labels

VSCode supports custom labels for the files that are currently being displayed. I have put together some labels that work amazingly with a typical NextJS project setup.

"workbench.editor.customLabels.patterns": {
  "**/app/**/layout.tsx": "${dirname(1)}/${dirname} - Layout",
  "**/app/**/page.tsx": "${dirname(1)}/${dirname} - Page",
  "**/app/**/route.ts": "${dirname(1)}/${dirname} - Route",
  "**/app/**/_components/**/*.tsx": "${filename} - ${dirname(2)}/${dirname(1)} - Component",
  "**/components/**/*.tsx": "${filename} - Component",
  "**/data-layer/**/*.ts": "${filename} - Data Layer",
  "**/entities/**/*.ts": "${filename} - Entity",
  "**/hooks/**/*.ts": "${filename} - Hook",
  "**/lib/**/*.ts": "${filename} - Library",
  "**/utils/**/*.ts": "${filename} - Utility",
  "**/env/**/*.ts": "${filename} - Environment"
}

You can always modify it to match your project needs!

To correctly setup the settings for your project create a directory called .vscode with a settings.json file inside of it. Then simply add your settings in there and it will apply for everyone in the project that uses VSCode.

NextJS TypeScript Version

Do not forget to set your TypeScript version to the one provided by NextJS. You can do so by opening the command palette in VSCode by pressing CTRL + SHIFT + P or F1 and then entering >TypeScript: Select TypeScript Version... after you have done so you want to select Use Workspace Version.

This will also add:

"typescript.tsdk": "node_modules\\typescript\\lib"

to settings.json in the .vscode directory of your project.

Result

You can easily identify what file belongs to what directory and therefore you for example do not have multiple "page.tsx" that you have to guess which one is correct.