Time Saving – Reduce boilerplate and follow Next.js best practices
Usage
Install the extension from the VS Code Marketplace or manually from the VSIX package.
Open a TypeScript React (.tsx) file in your Next.js project.
Type a snippet prefix (e.g., appRoutePage, appRouteNotFound).
Select the snippet from IntelliSense.
The snippet will expand into a ready-to-use code template.
Context-Aware Snippets
Note: Not every snippet is available in every .tsx file. Each snippet is context-aware and will only appear in files that match specific patterns. For example, a snippet for a not-found.tsx page will only be suggested in files named not-found.tsx within the app directory. This keeps IntelliSense clean and ensures snippets appear only where they make sense.
Example Snippet Prefixes & Where They Work
Prefix
Where it works
appRouteNotFound
**/app/**/not-found.tsx
appRouteUnauthorized
**/app/**/unauthorized.tsx
appRouteForbidden
**/app/**/forbidden.tsx
appRouteError
**/app/**/error.tsx
appRouteLoading
**/app/**/loading.tsx
appRoutePage
**/app/**/page.tsx or **/app/**/[slug]/page.tsx
appRouteSearchPage
**/app/**/page.tsx or **/app/**/[slug]/page.tsx
appRouteLayout
**/app/**/layout.tsx
appRouteMetadata
**/app/**/page.tsx or **/app/**/layout.tsx
appRouteStaticParams
[slug]/page.tsx, [slug]/layout.tsx, or [slug]/route.ts
appRouteAction
**/app/**/page.tsx , **/lib/**/*.ts, **/app/**/actions.ts or **/actions/**/*.ts
appRouteClientComponent
**/ui/**/*.tsx, **/*provider.tsx or **/components/**/*.tsx
See the full list of filters and prefixes in the snippets file.
Requirements
Visual Studio Code v1.109.0 or higher
Next.js project using the App Router
Installation
From VS Code Marketplace
Open VS Code
Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
