프로젝트 세팅

설치 방법 2가지

1. 자동 설치

자동 설치는 사전 설치 항목들이 많을 것임(typescript, tailwind 등..) : npx create-next-app@latest

2. 수동 설치

설치 방법

1. 설치하고 싶은 폴더로 이동

2. npm init -y ⇒ package.json 생성
1. license 부분을 MIT로 변경

3. 라이브러리 설치
react@latest
next@latest
react-dom@latest ⇒ 리액트를 브라우저 dom에 렌더

4. /app/page.tsx 를 생성 후 리액트 컴포넌트 작성(export default 되어야 함, 컴포넌트 이름은 자유롭게)

5. 명령어 설정
• package.json의 script에 dev:next dev
⇒ nextJS가 코드를 찾아서 실행. 즉, app 안에 있는 page 파일을 알아서 찾음
• 프레임워크(NextJS)가 코드를 호출한 것! 즉, 우리가 page 파일을 찾으라 명시하지 않아도 nextJS가 알아서 찾은 것임

6. 명령어 실행 (npm run dev)
• react를 import하지 않아도 빌드 쌉가능. (nextJS가 알아서 제공!)
• ts등 필요한 라이브러리가 설치되어 있지 않다면 자동으로 설치





• layout.tsx가 app안에 자동으로 생성됨

• 새로고침 하면 알아서 리렌더링 된다

1. app/page를 렌더하라고 명령

2. react를 import

3. tsx 실행을 위해 ts를 설치

4. app안에 layout.tsx를 생성