Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Next.js 13 snippets | TypeScript versionNew to Visual Studio Code? Get it now.
Next.js 13 snippets | TypeScript version

Next.js 13 snippets | TypeScript version

htmllessons_ru

htmllessons.ru
|
544 installs
| (2) | Free
| Sponsor
The best code snippets for working with the new Next.js 13 (app) directory. Mostly TypeScript versions. RED Group recommends
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 by RED Group and htmllessons

The best code snippets for working with the new Next.js 13 (app) directory. Mostly TypeScript versions. RED Group recommends.

Usage

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

Features

Command Description
pncs Page SEO component
pnc Page no index component
lnc Layout component
cnc Client component
gmd generateMetaData
md metadata
gsp generateStaticParams for Dynamic Page Static

List Snippets

Next 13.4 | Page SEO component

Prefix: pncs

Definition: Page Next Component SEO

import type { Metadata } from 'next'

export const metadata: Metadata = {
	title: '',
	description: '',
}

export default function Page() {
	return <div>Page</div>
}

Next 13.4 | Page no index component

Prefix: pnc

Definition: Page Next Component

import type { Metadata } from 'next'
import { NO_INDEX_PAGE } from '@/constants/seo.constants'

export const metadata: Metadata = {
	title: '',
	...NO_INDEX_PAGE, // { robots: { index: false, follow: false } }
}

export default function Page() {
	return <div>Page</div>
}

Next 13.4 | Layout component

Prefix: lnc

Definition: Layout Next Component

import type { PropsWithChildren } from 'react'

export default function Layout({ children }: PropsWithChildren<unknown>) {
	return <div>{children}</div>
}

Next 13.4 | Client component

Prefix: cnc

Definition: Client Next Component

'use client';

interface I${TM_FILENAME_BASE} {}

export default function ${TM_FILENAME_BASE}({}: I${TM_FILENAME_BASE}) {
  return <div>page</div>;
}

Next 13.4 | generateMetaData

Prefix: gmd

Definition: Generate Meta Data

import type { Metadata } from 'next';

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

Next 13.4 | metadata

Prefix: md

Definition: MetaData

import type { Metadata } from 'next'

export const metadata: Metadata = {
	title: '',
	description: '',
}

Next 13.4 | generateStaticParams for Dynamic Page Static

Prefix: gsp

Definition: Generate Static Params

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

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

Happy and fast coding! And also a productive day from RED Group! 🚀

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