Next.js Snippets for VS Code
A comprehensive collection of Next.js snippets for Visual Studio Code that enhances your development workflow.
⚠️ Disclaimer ⚠️
This extension is not an official Next.js product. It is a third-party extension created to enhance the Next.js development experience in VS Code.
Credits
Features
- Snippets for Next.js 14+ components and features
- Support for TypeScript and JavaScript
- Covers App Router, Server Components, and Client Components
- Includes snippets for API routes, middleware, and more
- Tailwind CSS support in UI components
Snippets
Basic Components
Prefix |
Description |
npage |
Next.js Page Component |
nserver |
Next.js Server Component |
nclient |
Next.js Client Component |
nlayout |
Next.js Layout Component |
ndynamic |
Next.js Dynamic Route Page |
Data Fetching
Prefix |
Description |
nstaticprops |
Next.js Static Props (getStaticProps) |
nserverprops |
Next.js Server-side Props (getServerSideProps) |
API and Routes
Prefix |
Description |
napi |
Next.js API Route |
nroute |
Next.js Route Handler |
nmiddleware |
Next.js Middleware |
nformaction |
Next.js Form Action |
UI Components
Prefix |
Description |
nimage |
Next.js Image Component |
nlink |
Next.js Link Component |
nloading |
Next.js Loading UI Component |
nerror |
Next.js Error UI Component |
Configuration
Prefix |
Description |
nmeta |
Next.js Metadata Configuration |
ndocument |
Next.js Custom Document |
napp |
Next.js Custom App |
Installation
- Open VS Code
- Press
Ctrl+P to open the Quick Open dialog
- Type
ext install nextjs-snippets and press Enter
- Reload VS Code when prompted
Requirements
- VS Code 1.60.0 or higher
- Next.js 14 or higher
Extension Settings
This extension contributes the following settings:
nextjs-snippets.enable : Enable/disable the extension
Known Issues
None at the moment.
Release Notes
See CHANGELOG.md for release notes.
Contributing
We welcome your feedback and suggestions to improve these snippets.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Support
If you find any issues or have suggestions, please contact the extension author.
| |