ดาวน์โหลด nextjs components - nextjs components Source Source Download

nextjs components

ส่วนประกอบของบุคคลที่สาม

v5.2.0

ดาวน์โหลด

คำเตือน

โครงการนี้ไม่ได้รับการดูแลอย่างแข็งขัน

องค์ประกอบ nextjs

คอลเลกชันของส่วนประกอบปฏิกิริยาที่ถอดความจาก https://vercel.com/design ¹

องค์ประกอบ nextjs

แรงจูงใจ

บล็อกโพสต์ตั้งแต่ 01/09/2022

การติดตั้ง

 # with npm
npm i nextjs-components

 # with yarn
yarn add nextjs-components

โครงการนี้จะต้องถูกส่งต่อเพื่อทำงานกับแอปพลิเคชัน next.js ของคุณ ขอแนะนำให้ใช้ Next.js 13.1.0 โมดูล tranpilation ในตัว (จนถึง next.js 13.1.0 , next-transpile-modules

 // next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  reactStrictMode : true ,
  pageExtensions : [ "tsx" , "ts" ] ,
  swcMinify : true ,
  transpilePackages : [ "nextjs-components" ] ,
} ;

module . exports = nextConfig ;

การใช้งาน

ใช้ไดเรกทอรี app 13 ของถัดไป

 "use client" ;

// ./app/layout.tsx
import { ThemeContextProvider } from "nextjs-components/src/contexts/ThemeContext" ;
import "nextjs-components/src/styles/globals.css" ;

export default function RootLayout ( { children } ) {
  return (
    < html lang = "en" >
      < body >
        < ThemeContextProvider > { children } </ ThemeContextProvider >
      </ body >
    </ html >
  ) ;
}

การใช้แบบ ดั้งเดิม _app.tsx แบบกำหนดเอง

 // ./pages/_app.tsx
import {
  ThemeContextProvider ,
  ToastArea ,
  ToastsProvider ,
} from "nextjs-components" ;
import "nextjs-components/src/styles/globals.css" ;

function App ( { Component , pageProps } ) {
  return (
    < ThemeContextProvider >
      < ToastsProvider >
        < Component { ... pageProps } />
        < ToastArea />
      </ ToastsProvider >
    </ ThemeContextProvider >
  ) ;
}

export default App ;