Next.js Server Snippets
Essential code snippets for Next.js server-side development. Speed up your development with ready-to-use templates for API Routes, Server Actions, Middleware, and more.
🚀 Features
- API Route Handlers - GET, POST, PUT, DELETE with error handling
- Server Actions - Form handling and database operations
- Authentication - Token validation and cookie management
- File Operations - Upload handling and processing
- Middleware - Custom middleware templates
- Database Integration - Ready-to-use database operation patterns
- Error Handling - Consistent error responses
- CORS & Rate Limiting - Security best practices
📝 Available Snippets
API Routes
| Trigger |
Description |
nxget |
Basic GET route handler |
nxpost |
POST route handler with JSON parsing |
nxput |
PUT route handler for updates |
nxdelete |
DELETE route handler |
nxgetparams |
GET with URL parameters |
nxpostparams |
POST with URL parameters |
Request Handling
| Trigger |
Description |
nxquery |
Handle query parameters |
nxheaders |
Work with request/response headers |
nxauth |
Authentication check with cookies |
nxupload |
File upload handler |
nxcookies |
Cookie operations |
Server Actions
| Trigger |
Description |
nxaction |
Basic server action |
nxactiondb |
Server action with database and revalidation |
Database & Security
| Trigger |
Description |
nxdbget |
Database GET operation |
nxmiddleware |
Next.js middleware |
nxcors |
CORS headers setup |
nxratelimit |
Simple rate limiting |
Response Helpers
| Trigger |
Description |
nxsuccess |
Success response format |
nxerror |
Error response format |
🎯 Usage
- Create a new file in your Next.js project (e.g.,
app/api/users/route.js)
- Type any snippet trigger (e.g.,
nxget)
- Press
Tab to expand the snippet
- Use
Tab to navigate between placeholders
- Customize the code for your needs
Example
Type nxpost and press Tab:
export async function POST(request) {
try {
const body = await request.json();
// Your logic here
return Response.json({ message: "Created successfully" }, { status: 201 });
} catch (error) {
return Response.json({ error: "Internal Server Error" }, { status: 500 });
}
}
🔧 Requirements
- VS Code 1.74.0 or higher
- Next.js 13+ (App Router)
- JavaScript (snippets work in
.js and .jsx files)
📁 File Structure Examples
These snippets work perfectly with Next.js App Router structure:
app/
├── api/
│ ├── users/
│ │ └── route.js # Use: nxget, nxpost
│ ├── users/[id]/
│ │ └── route.js # Use: nxgetparams, nxpostparams
│ └── upload/
│ └── route.js # Use: nxupload
├── actions/
│ └── user-actions.js # Use: nxaction, nxactiondb
└── middleware.js # Use: nxmiddleware
🎨 Customization
All snippets include placeholder variables that you can quickly modify:
${1:variable} - Primary placeholders (auto-selected)${2:variable} - Secondary placeholders- Navigate with
Tab and Shift+Tab
🐛 Issues & Feedback
Found a bug or have a feature request?
Open an issue on GitHub
📄 License
MIT License - feel free to use in your projects!
Happy coding with Next.js! 🚀
