Next.js 13+ Power Snippets | TypeScript/JavaScript

Supercharge your Next.js development with a collection of powerful and time-saving code snippets specifically tailored both in TypeScript and JavaScript

Overview

This extension offers a comprehensive collection of code snippets that cover a wide range of scenarios, allowing you to effortlessly enhance your productivity and build stunning Next.js applications.

Features

• Effortless Usage: Each snippet comes with an intuitive and memorable prefix, ensuring you can quickly insert the desired code.
• Organized Sections: Snippets are thoughtfully grouped into categories for quick access.
• JavaScript & TypeScript: Enjoy seamless compatibility with both JavaScript and TypeScript, catering to your coding preferences.
• Next.js 13+ Optimized: These snippets are tailored for Next.js 13+, ensuring you have the latest and most efficient tools at your fingertips.

Snippet Categories

Usage

1. Install the Next.js Code Snippets Extension in your code editor.
2. Open a .js|.jsx or .ts|.tsx file in your Next.js project.
3. Start typing the snippet prefix to trigger auto-suggestions.
4. Select the desired snippet and press Enter to insert the code.

Kindly find All Snippets HERE

Handy Snippets

Next.js Page - np

np - Next.js Page: Default

export default function Page() {
	return <main>{/* Your content here */}</main>;
}

npasync - Next.js Page: Async Function

async function customFunction() {
	/* Your code here */
}

export default async function Page() {
	const data = await customFunction();
	return <main>{/* Your content here */}</main>;
}

npfetchStatic - Next.js Page: Fetch default (staticData)

async function getData() {
	const res = await fetch("https://...");

	if (!res.ok) {
		throw new Error("Failed to fetch data");
	}

	return res.json();
}

export default async function Page() {
	const data = await getData();

	return <main>{/* Your content here */}</main>;
}

Next.js Route Handler - nr

nrpost - Next.js Route Handler: Default POST Method

import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
	const body = await request.json();
	try {
		const result = await saveData(body);
		return NextResponse.json({ message: "OK", result }, { status: 201 });
	} catch (error) {
		return NextResponse.json({ message: "Error", error }, { status: 500 });
	}
}

nrgetSearchParams - Next.js Route Handler: GET() with searchParams

import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
	const id = request.nextUrl.searchParams.get("id");
	try {
		const result = await fetchData(id);
		return NextResponse.json({ message: "OK", result }, { status: 200 });
	} catch (error) {
		return NextResponse.json({ message: "Error", error }, { status: 500 });
	}
}

Next.js Action - na

nafetchGet - Next.js Action: Fetch GET Request

export async function fetchGetFunction() {
	try {
		const response = await fetch("https://...", {
			method: "GET",
			headers: {
				"Content-Type": "application/json",
			},
		});

		if (!response.ok) {
			throw new Error(`HTTP error! Status: ${response.status}`);
		}

		return response.json();
	} catch (error) {
		console.error("Fetch GET error:", error);
		throw error;
	}
}

naaxiosGet - Next.js Action: Axios GET request

import axios from "axios";

export async function axiosGetFunction() {
	try {
		const response = await axios.get("https://...");
		const { result } = response.data;
		return result;
	} catch (error: any) {
		throw new Error("Axios Get Error :(");
	}
}

Next.js Function - nf

nf - Next.js Function: Basic

export function ${1:functionName}() {
  /* Your code here */
}

nfdefaultExport - Next.js Function: Default Export

export default function ${1:functionName}() {
  /* Your code here */
}

nfgstaticParams - Next.js Function: generateStaticParams

export async function generateStaticParams() {
	const dataList = await fetch("https://...").then((res) => res.json());

	return dataList.map((data: Object) => ({
		param: data.param,
	}));
}

Next.js Component - nc

ncloading - Next.js Component: Loading

export default function Loading() {
	return <p>Loading...</p>;
}

Kindly find all the supported snippets HERE

Feedback and Contributions

We're dedicated to improving this extension and making it even more useful for the Next.js community. If you have found a bug, have suggestions, or want to contribute new snippets, feel free to reach out on GitHub.

Liked the snippets ?

Rate here, and help us reach more users :)