A handy set of Next.js code snippets for Visual Studio Code to boost your development speed with reusable components, API routes, layout files, and more.
✨ Features
✅ Page & layout components
✅ API route handlers (GET/POST)
✅ Dynamic & static metadata
✅ Head, font, and provider setup
✅ Custom hooks and utility snippets
✅ Fully typed with best practices
📦 Snippet Prefixes
Prefix
Description
nlayout
Layout with children prop
napi
API route with GET/POST
ngmeta
generateMetadata function
ncc
Client component
nsc
Server component
nccwp
Client component with props
nscwp
Server component with props
cl
console.log
us
useState
ue
useEffect
dwi
Dynamic with Import statement
di
Dynamic without Import
(More snippets coming soon!)
🚀 Usage
Install this extension from the VS Code Marketplace.
Open a .js, .ts, .jsx or .tsx file.
Type the snippet prefix (e.g., ncc) and hit Tab or Enter.
