nextjs-components
TypeScript icon, indicating that this package has built-in type declarations

5.3.0-rc.1 • Public • Published

nextjs-components

A collection of React components, transcribed from https://vercel.com/design. 1

npm latest package npm next package

nextjs-components

Motivation

Blog post from 01/09/2022

Installation

# with npm
npm i nextjs-components
# with yarn
yarn add nextjs-components

This project needs to be transpiled to work with your Next.js application. It is recommended to use Next.js 13.1.0’s built-in module tranpilation. (Up until Next.js 13.1.0, next-transpile-modules handled this use case.)

// next.config.js

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

module.exports = nextConfig;

Usage

Using Next 13's app directory

"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>
  );
}

Using the traditional custom _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;

Check out the documentation site for more examples!

Warning: Dropped create-react-app support.

In older versions, usage with create-react-app was supported. However, from >=v1.0.0, the pre-built /dist folder was dropped.

  1. This is not affiliated with Vercel

Readme

Keywords

none

Package Sidebar

Install

npm i nextjs-components

Weekly Downloads

148

Version

5.3.0-rc.1

License

ISC

Unpacked Size

677 kB

Total Files

548

Last publish

Collaborators

  • thiskevinwang