Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Snippets simple Next.js 13New to Visual Studio Code? Get it now.
Snippets simple Next.js 13

Snippets simple Next.js 13

yuzu

|
287 installs
| (1) | Free
Here is a snippet of Next.js 13 code for a folder app
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Next.js 13 Extension Snippets

This is a collection of useful code snippets to speed up development in Next.js 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.

Full Snippets

Page Component

Prefix: prc

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

Layout Component

Prefix: lrc


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


Client Component

Prefix: crc


'use client';

interface ${Name}Props {
  ${propName}: ${string};
}
export default function ${Name}({}:${Name}Props) {
  return (
    <div>
      <h1>Hello Root and MetaData ${Name}</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
}

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!

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft