nextjs-components
A collection of React components, transcribed from https://vercel.com/design. 1
Motivation
Blog post from 01/09/2022
Installation
# with npm
npm i nextjs-components# with yarn
yarn add nextjs-componentsThis 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-appsupport.In older versions, usage with
create-react-appwas supported. However, from>=v1.0.0, the pre-built/distfolder was dropped.