본문 바로가기
Study/NextJS 공식문서

[1주 차] 설치하기

T.J 2025. 1. 5. 15:01

자동 설치

npx create-next-app@latest
// 설치 시 다음과 같은 메세지가 표시 됨
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@ / *)? No / Yes
What import alias would you like configured? @ / *

 

수동 설치

npm install next@latest react@latest react-dom@latest
// package.json에 아래 코드 추가
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}
dev: NextJS를 개발 모드에서 시작하는 명령어다.
build: 프로덕션 사용을 위해 애플리케이션을 빌드하는 명령어다.
start: NextJS 프로덕션 서버를 시작하는 명령어다.
lint: NextJS의 내장 ESLint 설정을 실행하기 위한 명령어다

 

디렉토리 생성

NextJS는 파일 시스템 라우팅을 사용한다.
애플리케이션의 경로는 파일을 어떻게 구성하느냐에 따라 결정된다.

 

App Router

새로운 애플리케이션의 경우 App Router를 사용하는 것이 좋다. 이 라우터를 사용하면 React의 최신 기능을 사용할 수 있으며 커뮤니티 피드백을 기반으로 한 Pages Router 의 진화형이다.

 

html과 body 태그를 필수로 가진 RootLayout 컴포넌트를 app/layout.tsx안에 만든다.
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

 

마지막으로, app/page.tsx에 초기 콘텐츠가 포함된 메인 페이지를 만든다.
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

'Study > NextJS 공식문서' 카테고리의 다른 글

[2주 차] Loading UI and Streaming  (0) 2025.01.11
[2주 차] Linking and Navigating  (0) 2025.01.10
[2주 차] Layout and Template  (0) 2025.01.10
[2주 차] Defining Routes  (0) 2025.01.10
[1주 차] 프로젝트 구조  (0) 2025.01.05

'Study/NextJS 공식문서' Related Articles

티스토리툴바