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