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

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! 🚀