Next.js 14/15 and React Extension Snippets by RED Group and htmllessons

The best code snippets for working with the new Next.js 14/15 (app) directory. Mostly TypeScript versions. Good works for react. RED Group recommends.

Usage

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

Snippets

1. (BONUS)Interface Creation

• Trigger: inter
• Description: Create a new interface.

interface Props {
	${1}
}

2. (BONUS)Console Log

• Trigger: c
• Description: Insert console.log.

console.log(${1})

3. Next 14/15 | Page SEO Component

• Trigger: pncs
• Description: Next 14/15 | Page SEO component.

import type { Metadata } from 'next'

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

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

4. Next 14/15 | Page No Index Component

• Trigger: pnc
• Description: Next 14/15 | Page no index component.

import type { Metadata } from 'next'

import { NO_INDEX_PAGE } from '@/constants/seo.constants'

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

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

5. Next 14/15 | Layout Component

• Trigger: lnc
• Description: Next 14/15 | Layout component.

import type { PropsWithChildren } from 'react'

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

6. Next 14/15 | Client Component

• Trigger: cnc
• Description: Next 14/15 | Client component.

'use client'

interface Props {}

export function ${TM_FILENAME_BASE}({}: Props) {
	return <div>${TM_FILENAME_BASE}</div>
}

7. Next 14/15 & React | Simple Component

• Trigger: sc
• Description: Next 14/15 | Simple client component.

export function ${TM_FILENAME_BASE}() {
	return <div>${TM_FILENAME_BASE}</div>
}

8. Next 14/15 & React | Simple Component with Interface

• Trigger: sci
• Description: Next 14/15 | Simple component with interface.

interface Props {}

export function ${TM_FILENAME_BASE}({}: Props) {
	return <div>${TM_FILENAME_BASE}</div>
}

9. Next 14/15 | Generate Metadata

• Trigger: gmd
• Description: Next 14/15 | Generate metadata.

import type { Metadata } from 'next'

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

10. Next 14/15 | Metadata

• Trigger: md
• Description: Next 14/15 | Metadata.

import type { Metadata } from 'next'

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

11. Next 14/15 | Generate Static Params for Dynamic Page

• Trigger: gsp
• Description: Next 14/15 | Generate static params for dynamic page.

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

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

12. Hook Creation

• Trigger: hook
• Description: Create a new TypeScript hook.

export function ${TM_FILENAME_BASE}() {
	${1}
	return {}
}

13. Import Styles Module

• Trigger: imrs
• Description: Add import for styles module.

import styles from './${1}${TM_FILENAME_BASE}.module.scss'

14. Import clsx as cn

• Trigger: imc
• Description: Add import for clsx.

import cn from 'clsx'

15. Import m from framer-motion

• Trigger: imm
• Description: Add import for m from framer-motion.

import { m } from 'framer-motion'

16. Call useAuth Hook

• Trigger: usea
• Description: Call the useAuth hook.

const {${1}} = useAuth()

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