Nextjs에서 Chakra UI를 통합하는 방법 🧑🎨
28499 단어 nextjstypescriptchakrajavascript
사용자 중간 단계를 만드는 것은 결코 간단한 작업이 아니지만 Chakra UI은 미학을 유지하면서 Next.js 응용 프로그램을 빠르게 시작하고 실행할 수 있는 훌륭한 UI 라이브러리입니다. 이 가이드에서는 Chakra UI로 간단한 Next.js 앱을 설정하는 방법을 배웁니다.
전제 조건
NextJs 프로젝트 만들기
다음을 실행하여 빈 Next.js 프로젝트를 만들 수 있습니다.
npx create-next-app my-project
# or
yarn create next-app my-project
Typescript를 사용하여 NextJs 프로젝트 만들기
또는 Next.js는 IDE와 유사한 통합 TypeScript를 제공합니다. 아래와 같이
create-next-app , --ts 플래그를 사용하여 --typescript 으로 TypeScript 프로젝트를 만들 수 있습니다.npx create-next-app@latest --ts
# or
yarn create next-app --typescript
🚨TypeScript 프로젝트에 Chakra UI를 추가할 때 최소 TypeScript 버전 4.1.0이 필요합니다.
Typescript 프로젝트를 성공적으로 생성했으면 프로젝트 디렉토리로 cd하고 루트 폴더에 빈
tsconfig.json 파일을 생성하여 시작합니다.touch tsconfig.json
Next.js는 이 파일을 기본값으로 자동 구성합니다. 또한 사용자 지정 컴파일러 옵션을 사용하여 자체
tsconfig.json를 제공하도록 지원됩니다. tsconfig.json 파일에 대한 상대 경로를 제공하려면 typescript.tsconfigPath prop 파일 내에 next.config.js를 설정하십시오.tsconfig.json 파일을 생성한 후 next 를 실행합니다. 일반적으로 npm run dev/yarn dev 및 Next.js는 애플리케이션 설정을 완료하기 위해 필요한 패키지 설치 과정을 안내합니다.npm run dev
# You'll see instructions like these:
#
# Please install TypeScript, @types/react, and @types/node by running:
#
# yarn add --dev typescript @types/react @types/node
#
# ...
모든 설치가 성공적으로 완료되면 파일을
.js에서 .tsx로 변환하고 TypeScript!로 코딩할 준비가 된 것입니다.🚨
next-env.d .ts라는 파일이 프로젝트의 루트에 생성됩니다. 이 파일은 TypeScript 컴파일러에서 Next.js 유형을 선택하도록 합니다. 언제든지 변경될 수 있으므로 제거하거나 편집할 수 없습니다.Node.js와 함께 Typescript를 사용하는 방법에 대해 자세히 알아보십시오Docs.
Next.js 애플리케이션에 Chakra UI 추가
Chakra UI 사용을 시작하려면 다음을 실행하여 핵심 Chakra UI 패키지를 설치합니다.
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# or
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
설치 후 Chakra providers 을 추가해야 합니다.
차크라 제공자에 추가
Chakra는 ChakraProvider 구성 요소를 사용하여 웹 사이트를 Chakra 테마, 색상 모드 기능, CSS 재설정, 전역 스타일 등과 같은 속성이 포함된 컨텍스트로 래핑합니다.
components/_app.js에서:import { ChakraProvider, Heading } from "@chakra-ui/react"
import * as React from "react";
import { render } from "react-dom";
import "./styles.css";
function App() {
return <Heading>Welcome to using Chakra + Next.Js</Heading>;
}
const rootElement = document.getElementById("root");
render(
<ChakraProvider>
<App />
</ChakraProvider>,
rootElement
);
Typescript를 사용하는 경우 다음과 같이
components/_app.tsx의 ChakraProvider 구성 요소를 사용합니다.import { ChakraProvider, Heading } from "@chakra-ui/react";
import * as React from "react";
import { render } from "react-dom";
import "./styles.css";
function App() {
return <Heading>Welcome to Chakra + TypeScript</Heading>;
}
const rootElement = document.getElementById("root");
render(
<ChakraProvider>
<App />
</ChakraProvider>,
rootElement
);
모든 항목을 성공적으로 가져온 경우 구성 요소가 다시 렌더링되면 새로 작성된 제목이 표시됩니다.
요령을 터득했으므로 이제 간단한 영웅 구성요소를 만들어 보겠습니다. 먼저
Hero.js 또는 Hero.tsx 파일을 만듭니다. 내부에서 다음 예제 코드를 사용해 보십시오.import {
Container,
Stack,
Flex,
Box,
Heading,
Text,
Image,
Icon,
useColorModeValue,
UnorderedList,
ListItem
} from "@chakra-ui/react";
export const Blob = (props) => {
return (
<Icon
width={"100%"}
viewBox="0 0 578 440"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M239.184 439.443c-55.13-5.419-110.241-21.365-151.074-58.767C42.307 338.722-7.478 282.729.938 221.217c8.433-61.644 78.896-91.048 126.871-130.712 34.337-28.388 70.198-51.348 112.004-66.78C282.34 8.024 325.382-3.369 370.518.904c54.019 5.115 112.774 10.886 150.881 49.482 39.916 40.427 49.421 100.753 53.385 157.402 4.13 59.015 11.255 128.44-30.444 170.44-41.383 41.683-111.6 19.106-169.213 30.663-46.68 9.364-88.56 35.21-135.943 30.551z"
fill="currentColor"
/>
</Icon>
);
};
export default function Hero() {
return (
<Container maxW={"7xl"}>
<Stack
align={"center"}
spacing={{ base: 8, md: 10 }}
py={{ base: 20, md: 28 }}
direction={{ base: "column", md: "row" }}
>
<Stack flex={1} spacing={{ base: 5, md: 10 }}>
<Heading
lineHeight={1.1}
fontWeight={600}
fontSize={{ base: "3xl", sm: "4xl", lg: "6xl" }}
>
<Text
as={"span"}
position={"relative"}
_after={{
content: "''",
width: "full",
height: "30%",
position: "absolute",
bottom: 1,
left: 0,
bg: "blue.400",
zIndex: -1
}}
>
Example Application
</Text>
<br />
<Text as={"span"} color={"blue.400"}>
Next.js + Chakra UI
</Text>
</Heading>
<Flex justifyContent="center" textAlign="left">
<UnorderedList>
<ListItem>Uses Next.js/Typescript on Front-end.</ListItem>
<ListItem>Uses ChakraUI for UI.</ListItem>
</UnorderedList>
</Flex>
</Stack>
<Flex
flex={1}
justify={"center"}
align={"center"}
position={"relative"}
w={"full"}
>
<Blob
w={"150%"}
h={"150%"}
position={"absolute"}
top={"-20%"}
left={0}
zIndex={-1}
color={useColorModeValue("blue.50", "blue.400")}
/>
<Box
position={"relative"}
height={"300px"}
rounded={"2xl"}
boxShadow={"2xl"}
width={"full"}
overflow={"hidden"}
>
<Image
alt={"Hero Image"}
fit={"cover"}
align={"center"}
w={"100%"}
h={"100%"}
src={
"https://media.istockphoto.com/photos/ink-blue-color-paint-pouring-in-water-isolated-on-white-background-picture-id902957562?k=20&m=902957562&s=612x612&w=0&h=y_Nu9PuNq9vhnQLBgjQ9jhuSW7y9vj62WP33D8d_Z9A="
}
/>
</Box>
</Flex>
</Stack>
</Container>
);
}
영웅 구성 요소를 만든 후에는 다음과 같이
components/_app.js 또는 components/_app.tsx 파일로 가져옵니다.import { ChakraProvider, Heading } from "@chakra-ui/react";
import * as React from "react";
import { render } from "react-dom";
import "./styles.css";
import Hero from "./hero.tsx";
function App() {
return (
<div>
<Hero />
</div>
);
}
const rootElement = document.getElementById("root");
render(
<ChakraProvider>
<App />
</ChakraProvider>,
rootElement
);
애플리케이션이 다시 렌더링되면 랜딩 페이지는 다음과 같아야 합니다.
축하합니다! 이제 Chakra UI 덕분에 절반의 시간에 멋진 사용자 중간 단계를 만들 수 있습니다. 🎉
Reference
이 문제에 관하여(Nextjs에서 Chakra UI를 통합하는 방법 🧑🎨), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/maxinejs/how-to-intergrate-chakra-ui-in-nextjs-ocm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
