Установка NextUI в NextJS с помощью Typescript

В этом разделе мы установим next ui в nextjs с помощью typescript. NextUI позволяет создавать красивые, современные и быстрые сайты/приложения независимо от вашего опыта в дизайне, созданные с помощью React.js и Stitches, основанные на React Aria и вдохновленные Vuesax.

Установка NextJS с помощью Typescript

Выполните приведенную ниже команду для создания проекта nextjs с помощью typescript.

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript
Войти в полноэкранный режим Выйдите из полноэкранного режима

Установка NextUI в NextJS

Установите nextui с помощью npm или yarn.

yarn add @nextui-org/react
# or
npm i @nextui-org/react
Войти в полноэкранный режим Выйдите из полноэкранного режима

Настройка NextUI в NextJS

  1. Перейдите в pages/app.js или pages/_app.tsx (создайте его, если он не существует) и добавьте следующее:_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;
Войдите в полноэкранный режим Выйти из полноэкранного режима
  1. Перейдите в pages/_document.js или pages/_document.tsx (создайте его, если он не существует) и добавьте следующее:
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;
Войти в полноэкранный режим Выход из полноэкранного режима

Протестируйте компонент NextUI Button.

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
Вход в полноэкранный режим Выход из полноэкранного режима

Читайте также

Установка NextUI в React с помощью Typescript
Пример формы входа в NextUI

Оцените статью
devanswers.ru
Добавить комментарий