Next.js 14/15 and React snippets 0.0.4

Next.js 14/15 和 React Extension Snippets 由 RED Group 和 htmllessons 共同推出，旨在为开发者提供高效的代码片段，帮助您在 Next.js 14/15 (app) 目录中快速开发。无论您是使用 TypeScript 还是 JavaScript，这些片段都能大幅提升您的开发效率。

使用方法：

这些代码片段支持 Tab 触发，可以在 TypeScript React、JavaScript React 以及部分 JavaScript、TypeScript 环境中使用。

主要代码片段：

1. 接口创建

   • 触发词: inter
   • 描述: 创建新接口。

     interface Props {
     ${1}
     }

2. 控制台日志

   • 触发词: c
   • 描述: 插入 console.log。

     console.log(${1})

3. Next 14/15 | 页面 SEO 组件

   • 触发词: pncs
   • 描述: Next 14/15 | 页面 SEO 组件。

     
     import type { Metadata } from 'next'

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

   export default function ${3}Page() { return

   ${4}
   }

4. Next 14/15 | 页面不索引组件

   • 触发词: pnc
   • 描述: Next 14/15 | 页面不索引组件。

     
     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

   ${3}
   }

5. Next 14/15 | 布局组件

   • 触发词: lnc
   • 描述: Next 14/15 | 布局组件。

     
     import type { PropsWithChildren } from 'react'

   export default function Layout({ children }: PropsWithChildren) { return (

   ${1} {children}
   ) } ```

6. Next 14/15 | 客户端组件

   • 触发词: cnc
   • 描述: Next 14/15 | 客户端组件。

     
     'use client'

   interface Props {}

   export function ${TM_FILENAME_BASE}({}: Props) { return

   ${TM_FILENAME_BASE}
   }

7. Next 14/15 & React | 简单组件

   • 触发词: sc
   • 描述: Next 14/15 | 简单客户端组件。

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

8. Next 14/15 & React | 带接口的简单组件

   • 触发词: sci
   • 描述: Next 14/15 | 带接口的简单组件。

     
     interface Props {}

   export function ${TM_FILENAME_BASE}({}: Props) { return

   ${TM_FILENAME_BASE}
   }

9. Next 14/15 | 生成元数据

   • 触发词: gmd
   • 描述: Next 14/15 | 生成元数据。

     
     import type { Metadata } from 'next'

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

10. Next 14/15 | 元数据

    • 触发词: md
    • 描述: Next 14/15 | 元数据。

      
      import type { Metadata } from 'next'

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

11. Next 14/15 | 为动态页面生成静态参数

    • 触发词: gsp

    • 描述: Next 14/15 | 为动态页面生成静态参数。

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

12. 钩子创建

    • 触发词: hook
    • 描述: 创建新的 TypeScript 钩子。

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

13. 导入样式模块

    • 触发词: imrs
    • 描述: 添加样式模块导入。

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

14. 导入 clsx 作为 cn

    • 触发词: imc
    • 描述: 添加 clsx 导入。

      import cn from 'clsx'

15. 从 framer-motion 导入 m

    • 触发词: imm
    • 描述: 从 framer-motion 导入 m。

      import { m } from 'framer-motion'

16. 调用 useAuth 钩子

    • 触发词: usea
    • 描述: 调用 useAuth 钩子。

      const {${1}} = useAuth()

祝您编程愉快且高效！同时，来自 RED Group 的祝福，祝您有一个高效的一天！?