Next.js 시작하기

I. Next.js 란?
https://nextjs.org/

Next.js by Vercel - The React Framework

About Next.js

Next.js는 React Framework (vs Library) 라고 합니다. 리액트는 라이브러리로 알려져 있고, 개발에 있어서 주도권이 개발자에게 있었지만 Next.js는 주도권이 우리에게 없다고 보면 됩니다.

 

대신, 프레임워크를 사용해 여러가지 결정과 처리를 자동화하고 정해진 룰(Rule)을 따라서 개발을 진행하면 되는 장점이 있다고 알고있습니다.

 

핵심적인 기능은 다음과 같습니다 (공식사이트 참조)

Next.js Main Features

 

Next.js가 제시한 규칙을 지키고 사용하는것, 그게 리액트와 다른것이라고 보면 되겠습니다. 왜 이렇게 Next.js가 인기가 있을까? 그건 아마도 풀스택(FullStack) 웹개발 프레임워크이기 때문일테고 이미 수많은 서비스들에서 Next.js를 채택하고 있기 때문이죠

 

- 요약 : Next.js는 프런트엔드 프레임워크 (React는 UI Library)

 

Next.js는 CSR(Client Side Rendering)과 SSR(Server Side Rendering)을 모두 제공합니다. 개발자가 작성한 코드가 올바른 위치에 있다면 Next.js는 이것을 가져와 Build 하고 호출해서 제대로 동작하는 풀스택 웹서비스를 동작하게 해줍니다.

 

II. 시작하기

(1) 시스템 요구사항

• Node.js 18.18 or later.
• macOS, Windows (including WSL), and Linux are supported.

(2) 프로젝트 셋업 (자동설치, Automatic Installation)

$ npx create-next-app@latest

Next.js Automatic Installation

 

+ 프로젝트 구조

project structure

(3) 프로젝트 셋업 (수동설치, Manually Installation)
- 빈 폴더를 생성하고, npm init -y (package.json 생성)

- 터미널 > npm install react@latest next@latest react-dom@latest

+ 패키지 설명

a. react@latest : 리액트 UI

b. next@latest : Next.js

c. react-dom@latest : DOM 렌더링

※ 최신 버전(latest) 기준

- package.json 스크립트 수정

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

package.json scripts

- 프로젝트 구조 생성 : (루트에) app 디렉터리와 그 내부에 page.jsx 또는 page.tsx (둘중 하나 택일) 생성합니다.

export default function Home() {
  return <h1>Hello Next.js!</h1>;
}

※ 이렇게 하면 사용자가 루트 (/) 경로에 접근했을때 렌더링을 해줍니다. 왜냐면, Next.js는 파일-시스템 라우팅을 사용하기 때문이죠

※ app/page.tsx 를 생성하면, 자동으로 typescript가 필요한것을 파악하고 관련 패키지등을 설치하고 추가적으로 app/layout.tsx (root layout)을 만들어 줍니다.

※ 터미널 > npm run build 명령을 실행하면,  Next.js가 typescript가 필요한지를 파악하고 구성을 자동으로 추가합니다. 

npm run dev

 

- app/page.tsx의 내용을 일부 수정하면 자동으로 Next.js가 내용을 파악하고 UI를 재렌더링 해줍니다.

 

- 자동으로 생성된 app/layout.tsx를 살펴보세요

app/layout.tsx

이 부분은 CSR과 SSR의 차이를 살펴보는게 더 좋을듯하고요, 적어도 Next.js를 선택한 이유중 하나이기도 하니까요!

다시말해 기본적으로 리액트 라이브러리를 알고 state, props, react-router 정도는 알고 있어야 Next.js가 필요하다는 것을 알테니까요..