Next.js 입문하기

사실 지금까지 잘 이용해왔는데 Next.js를 공부하기로 했다. 

 

 

개념 📃

Next.js는 프레임워크다. 프레임워크는 우리의 코드를 호출한다. 우리가 Next JS를 호출하는 것이 아니다. 우리가 올바른 폴더에 코드를 작성하면, 올바른 이름을 가진 폴더 안에 정확한 이름의 파일이 들어가 있으면, NextJs 우리의 코드를 사용해서 웹사이트를 만들어준다.

 

Next js 사용 시 변화

1. react-router를 사용하지 않는다. 내가 직접 url을 적지 않아도 된다. 

 

Client Side Rendering의 문제점

1. SEO에 적합하지 못하다.

html에 웹사이트에 유용한 데이터가 들어있어야 한다.

2. 사용자가 첫 화면을 보기까지 로딩이 오래 걸린다

 

Server Side Rendering의 재등장

1. 자바스크립트가 활성화 되지 않아도 html에 필요한 데이터가 담겨있다 -> 효율적인 SEO가 가능해진다.

2. 페이지 로딩이 빨라진다 -> use client를 사용하여, 인터랙티브한 페이지와 그렇지 않은 페이지를 구분할 수 있다. 렌더링 시 필요한 것만 자바스크립트가 불러올 수 있어서 코드양이 줄어든다.

 

 

Next.js는 모든 컴포넌트가 server side rendering이 된다. 즉, backend에서 render가 된다. ("use client가 있든, 없든")

 

한계

1. Blinking Issue

2. 서버 과부화

3. 웹이 제대로 반응하지 않을 수 있다.

 

 

hydration

단순 HTML을 React application으로 초기화 하는 작업.

Server side render로 지루한 html이 있고, hydration을 통해서 자바스크립트가 동적 화면으로 만들어준다. 

 

 

"use client" - use hydrate였다면 더 명확하게 전달 됐을 것이다. 

화면이 동적으로 동작된다. - backend에서 render되고, frontend에서 hydrate 된다. 

 

 

활용 예시 🪄

설치 방법

npm init

npm i react@latest next@latest react-dom@latest

react-dom : Dom에 렌더링 하기 위한 라이브러리

 

package.json에서 script 수정

 

 

app폴더 안에 page.tsx 생성

터미널에 npm run dev를 입력하면 자동으로 타입스크립트가 설치

import 한 게 없음에도 프로그램이 실행된다. 

app 폴더와 그 안에 들어 있는 layout.tsx와 page.tsx를 root segment라고 부른다. 

폴더를 생성한다는 것은 잠재적으로 Next.js에게 폴더명이 하나의 페이지가 될 수 있다고 알려주는 것이다. 즉,폴더를 생성함으로써 페이지를 이동할 수 있다. 폴더에 page.tsx가 있어야만 url로 인식한다. 만약 다른 파일(ex: avatar.tsx)이 있으면 그냥 폴더로 인식한다. 

 

 

 

metadata

레이아웃과 페이지만 metadata를 export할 수 있다. 웹페이지의 정보를 설명하는 데이터로 웹페이지의 제목, 설명 등의 정보를 포함할 수 있다.

레이아웃엔 템플릿을 만들어 매번 반복적으로 head를 수정하지 않을 수 있다. 

 

메타데이터는 병합되기 때문에 layout에 적은 description 역시 동일하게 적용된다.

 

 

route groups

우리의 routese들을 그룹화해서 logical 그룹으로 만들 수 있다. route group은 괄호로 묶어준다. - 괄호 폴더는 url에 영향이 없다.

Dynamic Routes

리액트 라우터에서 사용했던 방식과 유사

/movies/id  ====> <Movie />