Next.js 14 Extension Snippets

This is a collection of useful code snippets to speed up development in Next.js 14 (including version 13) (app) directory.

Usage

Tab trigger snippets are available for the following languages: TypeScript React, Javascript React.

Features

Command	Description
prc	Create a new page component.
lmrc	Create a new layout root component with metadata.
lrc	Create a new layout root component.
crc	Create a new client component.
mr	Create a new metadata.
gmrf	Create a new generateMetaData for SEO.
gsp	Create a new generateStaticParams function for dynamic page static
rag	Create a function Route Handler API GET.
ragd	Create a function Route Handler API GET with Dynamic.
rags	Create a function Route Handler API GET and Search.
rap	Create a function Route Handler API POST.
rau	Create a function Route Handler API UPDATE.
rad	Create a function Route Handler API DELETE.
load	Create a Loading component
err	Create a Error component with error handling and recovery

Full Snippets

Page Component

Prefix: prc

export default function ${Name}Page() {
  return (
    <div>
      <h1>Hello Page</h1>
    </div>
  );
}

Layout Component

Prefix: lrc

export default function ${Root Name}Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <h1>Hello Root Layout</h1>
    </div>
  );
}

Client Component

Prefix: crc

'use client';

export default function ${Name}() {
  return (
    <div>
      <h1>Client Component</h1>
    </div>
  );
}

Layout and Metadata Component

Prefix: lmrc

export const metadata = {
  title: '${Title}',
  description: '${Description}',
};
export default function ${Root Name}Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <h1>Hello Root and MetaData ${Name}</h1>
    </div>
  );
}

Metadata

Prefix: mr

export const metadata = {
  title: "${Title}",
  description: "${Description}",
};

generateMetaData

Prefix: gmrf

import type { Metadata } from 'next';

export async function generateMetadata({
  params,
}: {
  params: { ${slug} };
}): Promise<Metadata> {
  const product = await ${getData}(${slug});
  return { title: product.title };
}

generateStaticParams for Dynamic Page Static

Prefix: gsp

export async function generateStaticParams() {
  const posts = await fetch("${fetch url}").then((res) => res.json());

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

Route Handler API GET

Prefix: rag

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

export async function GET(request: Request, context: { params: { ${slug}: string } }) {

  const { ${slug} } = context.params;
}

Route Handler API GET with Dynamic

Prefix: ragd

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

export async function GET(request: Request, context: { params: { ${slug}: string } }) {

  const { ${slug} } = context.params;
}

Route Handler API GET and Search

Prefix: rags

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

export async function GET(request: Request) {
  const url = new URL(req.url).searchParams;
  const id = Number(url.get("id"));
  // Example: http://localhost:3000/api/posts?id=1
}

Route Handler API POST

Prefix: rap

import { NextResponse, NextRequest } from "next/server";
export async function POST(request: Request) {
  // this request body is a JSON object
  const { title } = await req.json();
  return new NextResponse.json({ title }, { status: 201 });
}

Route Handler API UPDATE

Prefix: rau

import { NextResponse, NextRequest } from "next/server";
export async function PUT(request: Request) {
  // this request body is a JSON object
  const { title } = await req.json();
  return new NextResponse.json({ title }, { status: 201 });
}

Route Handler API DELETE

Prefix: rad

import { NextResponse, NextRequest } from "next/server";
export async function DELETE(request: Request) {
  // your function here
}

Loading

Prefix: load

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

Error

Prefix: err

"use client";
import { useEffect } from "react";

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  useEffect(() => {
    // Log the error
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  );
}

Known Issues

Calling out known issues can help limit users opening duplicate issues against your extension.

Contributing

Contributions are welcome! If you have a useful code snippet that you'd like to share, simply open a pull request and we'll review it as soon as possible.

Enjoy!