[Next.js] 스타트 - 프로젝트 생성

목차

• - Next.JS 란?
• - Next.JS 특징
• - 프레임워크 vs 라이브러리
• - Next.JS 프로젝트 생성

Next.js ?

Next.js는 React 기반의 오픈소스 JavaScript 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 등 웹 애플리케이션 개발에 필요한 많은 기능을 제공한다.

Next.js의 주요 특징

• 서버 사이드 렌더링(SSR): 페이지를 서버에서 렌더링하여 SEO 개선 및 초기 로딩 속도 향상
• 정적 사이트 생성(SSG): 빌드 시점에 페이지를 미리 생성하여 빠른 성능 제공
• 파일 시스템 기반 라우팅: 폴더와 파일 구조를 기반으로 자동으로 라우트 생성
• API 라우트: 서버리스 함수를 쉽게 생성할 수 있는 기능
• 자동 코드 분할: 페이지별로 필요한 JavaScript만 로드하여 성능 최적화
• 이미지 최적화: 반응형 이미지 처리와 최적화 기능

---

Next.js를 제대로 이해하기 위해서는 먼저 프레임워크와 라이브러리의 차이점을 알아야 한다.

프레임워크와 라이브러리의 차이점

 

라이브러리 (Library)

개발자가 필요할 때 호출하여 사용하는 도구 모음으로, 개발자가 주도권을 갖고 필요한 기능을 가져다 사용한다.

 

React의 경우:

• 개발자가 모든 결정을 내린다 = 폴더 구조, 파일 이름, 라우팅 방식 등을 자유롭게 결정
• 필요한 기능만 선택적으로 사용가능
• 내가 라이브러리를 호출한다"는 개념

---

프레임워크 (Framework)

개발을 위한 기본적인 구조와 규칙을 제공하는 플랫폼으로, 제어의 주도권을 자신이 가지고 개발자가 규칙을 따라야 한다.

 

Next.js의 경우:

• 프레임워크가 주도권을 갖는다.
• 정해진 폴더 구조와 명명 규칙을 따라야 한다.
• 많은 기능이 자동화되어 있으며, 프레임워크가 개발자의 코드를 호출

💡프레임워크와 라이브러리의 차이를 내 방식으로 쉽게 이해하자면,
라이브러리는 도서관에 가서 내가 필요한 책들을 자유롭게 선택해 대출받아 읽는 것과 같고
프레임워크는 이름 그대로 '프레임(틀)', 정해진 규칙 안에서 작업해야 하는걸로 직역해서 이해하니까 쉽다.

---

Next.js 프로젝트 생성하기

1. Node.js 프로젝트 초기화

먼저 package.json 파일을 생성하기 위해 Node.js 프로젝트를 초기화한다.

npm init -y

 

2. 필수 패키지 설치

Next.js와 React, React DOM을 최신버전으로 설치한다.

npm install react@latest next@latest react-dom@latest

 

3. 스크립트 설정

package.json 파일의 "scripts" 부분을 수정하여 Next.js 개발 서버를 실행할 수 있게 한다.

"scripts": {
  "dev": "next dev" //개발 모드로 Next.js 서버 실행
 },

 

4. 기본 폴더 구조 생성

Next.js는 프레임워크로 특정 폴더 구조를 따라 'app' 폴더를 생성 후 page.jsx 혹은 page.tsx파일을 생성한다.

/nextJS-project
├── app
│   └── page.tsx    # 홈페이지 컴포넌트
├── node_modules
└── package.json

• app 폴더는 반드시 있어야 한다.
• page.js 파일은 실제 페이지를 나타낸다. UI를 렌더링
• layout.js 파일은 레이아웃을 정의한다.

5. 첫 번째 페이지 생성

app 폴더 안 page.tsx파일에 컴포넌트를 생성한다.

• 페이지 컴포넌트는 반드시 default export로 내보내야 한다.

// app/page.tsx
export default function Page() {
  return <div>hello Next.js!</div>;
}

6. 개발 서버 실행

npm run dev

1. app 폴더를 참조한다.
2. page 파일을 찾아 해당 컴포넌트를 렌더링한다.
3. layout 파일을 찾아 페이지 구조를 구성한다 - layout 파일이 없다면 자동으로 생성