Next.js 시작하기, Next.js 프로젝트 생성하기
React 프레임워크 Next.js를 시작해 보자.
간단히 Next.js 프로젝트를 생성하는 방법에 대해 알아보자.
먼저 Next.js 공식 홈페이지로 접속한다.
Next.js by Vercel - The React Framework
Next.js Boilerplate A Next.js app and a Serverless Function API. Image Gallery Starter An image gallery built on Next.js and Cloudinary. Next.js Commerce An all-in-one starter kit for high-performance e-commerce sites.
nextjs.org
Next.js 공식 페이지에 들어가면 [Get Started], [Learn Next.js] 2개 의 버튼이 보인다.
나중에는 둘 다 들어가서 봐야겠지만, [Get Started]만 봐도 프로젝트 생성까지는 할 수 있다.
순서
1. next.js web-app 생성하기
2. 생성된 next-app 실행해 보기
3. 시작페이지 수정하기 : app/page.tsx & app/layout.tsx
4. Next.js Project Structure
* react나 Next 등 FE 프레임워크를 사용하기 위해선 사전에 node.js, npm 이 설치가 되어 있어야 한다.
1. next.js web-app 생성하기
npx create-next-app@latest
거의 모든 소프트웨어 설치를 진행할 때 default 값으로 설치하는 게 best practice 이므로 그대로 설치한다.
프로젝트를 생성했으면 IDE로 열어준다. (필자 Visual Studio Code 사용)
2. 생성된 next-app 실행해 보기
npm run dev실행하고 다음 url로 접속한다.
http://localhost:3000
NEXT.JS 페이지가 뜬 것을 볼 수 있다.
프로젝트 디렉터리에서 app 폴더의 page.tsx를 수정하면 이 페이지를 수정할 수 있는 것으로 보인다.
프로그래밍 학습의 국룰 "Hello world"를 찍어보자.
3. 시작페이지 수정하기 : app/page.tsx & app/layout.tsx
메인 페이지에 Hello world를 띄워보자.
app/page.tsx 파일을 다음과 같이 수정한다.
공식 문서에서 app/layout.tsx 도 수정하라고 한다.
해보자.
app/layout.tsx 수정하기
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}일단 이렇게 수정을 해두면 프로젝트 시작 설정이 된 것 같다.
다음은 public folder를 생성하라고 한다. (위치 : project root)
그런데 프로젝트 생성하면 자동으로 public 폴더가 생성되어 있다.
여기에는 이미지, 폰트 등 공개 파일을 보관한다.
4. Next.js Project Structure
Next.js 프로젝트 구조에 대해서 공부해 본다.
최상위 위치의 파일들 (프로젝트 Root의 파일들)
각 파일들의 설명을 확인할 수 있다.
Next.js
Ecosystem
최상위 위치의 폴더들
Routing Conventions에 대한 내용이 있는데,
framework라서 App Routing에 사용되는 파일이 정해져 있는 것 같다.
일단 웹에서 Routing은 중요하기 때문에 Routing에 대한 규칙은 확인한다.
추후 개발을 할 때 Routing Conventions을 참고하면 된다.
전체를 이해하고 공부하면 좋겠지만,
Next.js를 a부터 z까지를 학습하는 과정이 아니기 때문에 일부 내용은 생략한다.
간단하게 Next.js 프로젝트를 생성하고 실행하는 방법에 대해 알아보았다.
'JS > react' 카테고리의 다른 글
| React App Create 기능 만들기 (0) | 2023.06.21 |
|---|---|
| React에서 State란? (0) | 2023.06.20 |
| React에서 Event 처리 어떻게 할까? (0) | 2023.06.20 |
| React Props에 대해 알아보자. Component에 데이터 보내기 (0) | 2023.06.19 |
| React.js Start 리액트 시작하기, React App 만들기 (0) | 2023.06.18 |