In this section we will install next ui in nextjs with typescript. NextUI allows you to make beautiful, modern, and fast websites/applications regardless of your design experience, created with React.js and Stitches, based on React Aria and inspired by Vuesax.
how to use nextui 2 in next js 13
Install NextJS with Typescript
Run below command to create nextjs project with typescript.
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript
Install NextUI in NextJS
Install nextui using npm or yarn.
yarn add @nextui-org/react
# or
npm i @nextui-org/react
Setup NextUI in NextJS
1. Go to pages/_app.js or pages/_app.tsx (create it if it doesn't exist) and add this:
pages/_app.tsx
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { NextUIProvider } from '@nextui-org/react';
function MyApp({ Component, pageProps }: AppProps) {
return (
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
);
}
export default MyApp;
2. Go to pages/_document.js or pages/_document.tsx (create if it doesn't exist) and add this:
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: React.Children.toArray([initialProps.styles])
};
}
render() {
return (
<Html lang="en">
<Head>{CssBaseline.flush()}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Test NextUI Button component.
pages/index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import { Button } from '@nextui-org/react';
import styles from '../styles/Home.module.css'
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Next App with Next UI</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
NextUI with <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started with Next UI with TypeScript
</p>
<div className={styles.grid}>
<Button>NextUI Button</Button>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
export default Home
nextjs with nextui
