반응형
1. 폴더 만들기
mkdir <폴더명>
2. 폴더 들어가기
cd <폴더명>
3. 해당폴더 Visual Studio Code에서 열기
code .
visual studio code 창 열리면 해당 terminal에서
npm init -y
4. Package.json 변경
5. Next, React, React-Dom 최신 버전 설치
npm install react@latest next@latest react-dom@latest
NextJS는 프레임 워크라 명명 규칙을 잘 따라야 한다.
APP 폴더안에 Page가 있어야 그것을 찾아서 렌더링을 해준다.
page는 page.tsx or page.jsx로 만들어 주면 초기 세팅은 끝이다.
6. page 작성
export default function Home() {
return <div>Home</div>;
}
7. 실행하기
npm run dev
실행하면 알아서 TypeScript가 필요하다고 설치해주고
layout.tsx가 없다고 설치까지 해준다.
NextJS 프레임워크 👍
layout.tsx 에 들어가면 아래와 같이 설정되어있는데,
전체적인 페이지의 레이아웃을 설정해주는 곳이라고 보면 된다.
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}metadata에서 title을 '개발일지'로 변경하면
react에서 Helmet 이라는 라이브러리를 사용했었는데,
NextJS는 그냥 layout에서 변경하면 알아서 반영해준다.
안쓸이유가 없어보이는 NextJS....
반응형
'Front-End > NextJS' 카테고리의 다른 글
| [NextJS] async 서버 컴포넌트 단위로 병렬 처리 (0) | 2024.09.13 |
|---|