NextUI를 공격합니다.with Next.js
아직 일본 이용자의 정보가 많지 않기 때문에 도입 방법을 간단히 소개하는 것도 있다.
NextUI 개요
조사 기간은 없지만 최근 출시된 리액트 대상 UI 세트다.개발 스폰서가 Vercel을 가지고 있는 것 같습니다.
2022/5/6은 현재 베타 버전으로 많이 완성된 것 같습니다.사용감이 MUI와 매우 비슷합니다.
코어 라이브러리에는 CSS-in-JS의 Stitches가 사용됩니다.
다음은 Stitches 공식 웹사이트의 참조입니다.
CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
자세히 알고 싶은 사람은 홈페이지에 가세요.
가져오기 방법
이번엔 맛만 보고 싶을 뿐이니 간단히 해 보자.
설치
1 필요한 설치
Next.js를 설치합니다.
디렉터리 이름은 무엇이든지 괜찮지만,nextui-sample입니다.
terminal
npx create-next-app nextui-sample
terminal
npm install @nextui-org/react
설치가 끝난 후 $npm run dev에서 로컬 서버를 시작하고 브라우저에서localhost:3000에 접근합니다.평소의 이 화면을 표시할 수 있다면 OK.
2 _app.추기
먼저app.다음과 같이 js를 편집합니다.
모든 페이지를 Next UIProvider로 둘러싸는 것이 일입니다.
_app.js
//最初から居るglobals.cssは消さないで残しておく。
import '../styles/globals.css'
// 1. import `NextUIProvider` component
import { NextUIProvider } from '@nextui-org/react';
function MyApp({ Component, pageProps }) {
return (
// 2. Use at the root of your app
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
);
}
export default MyApp;
3 _document.js의 제작/ 추기
SSR에서 NextUI를 사용하는 데 필요한 설명입니다.위의 공식 Docs 코드를 직접 사용합니다.
페이지 디렉토리 바로 아래document.js 파일을 만들고 다음 내용을 붙여넣습니다.
_document.js
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: <>{initialProps.styles}</>
};
}
render() {
return (
<Html lang="en">
<Head>{CssBaseline.flush()}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
실제 NextUI 터치
이번엔 전혀 안 건드렸어, 넥스트.NextUI 구성 요소로 js의 시작 페이지를 다시 만들고 스타일 조정을 합니다.완성되면 이런 느낌.
모든 코드를 보고 싶으신 분들은 Giithub부터 시작하세요.
사용 감각
사용감이 MUIv5와 상당히 가까워 직감성이 좋다.
그리고 주제를 정해야 돼요!할 때 베이스 라이브러리의 스티치스를 좋아하지 않을까 생각했어요.(아직 시도하지 않음)
설계
조립품의 디자인과 배색은 처음부터 인기가 많았고 음양기의 나도 만족스러웠다.
이번에 사용한 구성 요소 소개
index.jsx
//今回使ったコンポーネントたち
import { Link, Grid, Card, Text, Row } from "@nextui-org/react";
일부 링크 카드의 설치를 소개하다
index.jsx
//こんな感じにコンポーネント作った
const LinkCard = ({ url, title, text }) => {
return (
<>
<Link href={url}>
<Card clickable bordered>
<Text
css={{ textGradient: "45deg, $blue500 -20%, $red500 100%" }}
h2
>{`${title} ->`}</Text>
<Text p>{text}</Text>
</Card>
</Link>
</>
);
};
index.jsx
<Grid.Container
gap={2}
justify="center"
alignItems="center"
css={{ maxW: 800, marginTop: 100 }}
>
<Grid xs={12} md={6} justify="center">
<LinkCard
url="https://nextjs.org/docs"
title="Documentation"
text="Find in-depth information about Next.js features and API."
/>
</Grid>
<Grid xs={12} md={6} justify="center">
<LinkCard
url="https://nextjs.org/learn"
title="Learn"
text="Learn about Next.js in an interactive course with quizzes!"
/>
</Grid>
<Grid xs={12} md={6} justify="center">
<LinkCard
url="https://github.com/vercel/next.js/tree/canary/exampless"
title="Examples"
text="Discover and deploy boilerplate example Next.js projects."
/>
</Grid>
<Grid xs={12} md={6} justify="center">
<LinkCard
url="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
title="Deploy"
text="Instantly deploy your Next.js site to a public URL with Vercel."
/>
</Grid>
</Grid.Container>
최후
NextUI의 디자인과 사용감은 흠잡을 데가 없다.
이번에는 간단한 구성 요소만 사용했지만 여러 개의 고기능 구성 요소를 사용할 때 얼마나 무거운지 신경을 쓴다.
다음에는 중형 부품을 소환해 제대로 디자인해 보고 공연이 어떤지 보고 싶어요.나이어제로 런타임의 실력을 보여주세요.
Reference
이 문제에 관하여(NextUI를 공격합니다.with Next.js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/siino/articles/175e1c07752d5f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
