[Next.js] 기초 학습 내용 정리

✅ 노마드 코더 Next.js 시작하기 강의 내용 정리

 

1. 설치

package.json

1) 폴더 생성
2) npm init -y (혹시 모르니 license는 MIT로 바꿔주기)
3) react@latest, next@latest, react-dom@latest 설치
4) "scripts"에  "dev": "next dev" 추가

 

2. 실행

1) next js를 실행하면 app/page.jsx(tsx)를 실행함
2) TS가 설치되어있지 않다면 자동으로 TS 설치
3) layout.tsx가 없으면 자동으로 생성

 

3. Routing 라우팅

1) 폴더를 생성하고 폴더 내에 page.jsx(tsx) 파일을 생성하면 자동으로 라우팅
(ex) app/movie/page.jsx => /movie 로 접속 시 표시
2) page.jsx 파일 없이 폴더만 존재할 경우 페이지 없음(404) 에러 페이지로 연결
3) app 폴더에 page.jsx 외 다른 파일 or 다른 컴포넌트를 넣어도 되지만 page.jsx가 없으면 렌더링되지 않음

 

4. 404

1) 에러 페이지(404)를 직접 작성하고 싶다면 app/not-fount.tsx 에 페이지 작성

 

5. Link 링크

1) 네비게이션 작성 시 a태그 대신 Link(next/link) 태그 사용
2) Link 태그는 href={"/"} 등과 같이 사용할 수 있음
3) usePathname() (next/navigation) hook을 사용해서 현재 위치(url)를 알 수 있음
그냥은 사용할 수 없으며 컴포넌트 최상단에 "use client" 라고 입력해야 사용 가능 (SSRvsCSR에서 이어서 설명)

 

6. SSR vs CSR

1) CSR
- 클라이언트(브라우저)가 렌더링 하는 것 (ex. cra react)
- 페이지 코드를 보면 실제 소스 코드는 없는 것으로 나옴
root만 존재하며, 페이지 소스 코드는 처음부터 존재한 게 아니라 js에 의해 페이지에 추가됨
- 즉 페이지는 브라우저의  js 엔진으로 만들어진 것이기에 화면이 뜨기까지 대기하는 시간(js 로딩 시간)이 있음
- js를 비활성화한 경우 어떤 UI, app도 볼 수 없음
- google 검색 엔진은 페이지의 html을 보기 때문에 검색 엔진이 보기엔 빈 페이지로 보이게 됨 (= SEO에 안 좋음)

2) SSR
- next.js app의 모든 page, 모든 component는 자동으로 SSR 처리 (= 서버에서 렌더링)
- js 로딩 전에서 백엔드에서 처리한 HTML 보여줌
- 실제로 브라우저 소스 코드에 페이지 소스 코드가 존재
- js가 비활성화되어있어도 작동
- "use client"라고 작성해도 모든 컴포넌트는 우선적으로 SSR됨 (hydration에서 이어서 설명)

 

7. Hydration 프로세스

1) 단순 HTML(SSR 결과)을 React app(CSR)으로 초기화하는 작업
2) 페이지 이동 요청 -> next.js가 단순 HTML로 변환(SSR) -> 유저에게 보여줌(1차)
-> React app 초기화 -> react CSR 적용(js 작동)  -> 유저에게 업데이트 해서 보여줌 (2차)
3) SSR은 모든 component에서 실행되지만 hydration은 "use client"가 적힌 컴포넌트에서만 작동
4) "use client"가 안 적혀있으면 그냥 SSR된 상태로 남겨져있음 (= interactive 하지 않은 채 hard 상태로 있음)
이 경우 다운받을 js가 적어지기 때문에 성능에서 이득 (= 인터렉션이 없다면 하드 페이지로 남겨두는 쪽이 좋음)
즉 "use client" = "use hydrate" 라는 뜻
5) data fetching에서 효과를 발휘
6) server component 안에는 client component("use client" 작성한 컴포넌트)를 넣을 수 있지만 반대는 불가
client 컴포넌트의 children은 무조건 client 컴포넌트

 

8. Layout

1) 페이지 이동 시 layout 컴포넌트 렌더링 > URL 확인 > url에 맞는 컴포넌트 렌더링
2) 각 폴더(url)별로 레이아웃 설정도 가능하며, 이 경우 대체가 아니라 중첩됨 (상위 레이아웃 & 하위 레이아웃 모두 적용)

 

9. metadata

export const metadata = {
    title: "HOME | Next Movies",
    description: "The best movies",
};

export const metadata: Metadata = {
    title: {
        template: "%s | Next Movies",
        default: "Loading...",
    },
    description: "The best movies",
};

1) 페이지의 title, description 등 메타 태그를 작성할 수 있음
2) layout, page 어디서든 설정 가능
3) 하위를 우선으로 병합됨 (중첩 X, 대체)
4) template, default 를 이용해서 템플릿으로도 만들 수 있음
%s 자리에 하위 컴포넌트에서 작성한 title이 대체됨

 

10. 괄호 ( ) 폴더

1) 괄호 폴더는 단순 그룹화를 위해 사용하며 url에는 영향주지 않음
(ex) app/(movies)/view/page.jsx => /view

 

11. dynamic route 다이나믹 라우트

1) react route에서의 /movies/:id 처럼 여러 값을 받는 라우팅
2) app/movies/[id]와 같은 구조로 작성
3) 파라미터는 props를 받아와서 확인 가능

4) params를 통해 url의 [id], searchParams를 통해 쿼리 스트링 파라미터를 받아올 수 있음