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.
Install NextJS with Typescript
Run below command to create nextjs project with typescript.
npx create-next[email protected] --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
