카테고리 없음

[Next.js] 공식문서 공부하기(자체번역) Next.js란 무엇인가? 

Jenner 2024. 4. 30. 13:58



Next.js란 무엇인가? 

풀스택 웹 애플리케이션을 빌드하는 React framework다. React Components를 UI를 빌드하는데 사용하고 Next.js를 활용해 추가 기능과 최적화를 사용할 수 있다. 

아래에 Next.js는 추상적이고 자동으로 번들링, 컴파일링 등등의 리액트가 필요한 툴들을 구성한다. 이것은 설정에 많은 시간을 쏟는 것 대신 애플리케이션 빌드에 집중할 수 있게 해준다. 개인이거나 team의 구성원이거나 Next.js는 인터랙티브하고 다이내믹하고 빠른 리액트 앱을 빌드하는 데 도움을 줄 것이다. 



Next.js의 주요기능 

 

  • routing
    파일시스템 기반의 라우터는 서버컴포넌트의 상위에 내장되어 레이아웃과 nested routing, loading state, error handling 등을 지원한다. 
  • rendering
    클라이언트 사이드 렌더링과 서버 사이드 렌더링을 클라이언트와 서버 컴포넌트를 이용해 실행하고, Next.js를 활용하여 서버에서 정적(미리 생성된 콘텐츠)과 동적(요청 시 생성되는 콘텐츠) 콘텐츠를 렌더링하여 성능을 최적화한다
  • Data Fetching
    서버 컴포넌트의 단순화된 async/await를 활용한 data fetching과 memoization과 데이터 캐싱과 갱신 요청을 위한 확장된 fetch API
  • Styling
    CSS modules와 Tailwind CSS와 CSS-in-JS를 포함한 preferred styling CSS메소드
  • Optimizations
    Core Web Vitals와 UX를 증진하기 위한 Image, Fonts, Script 최적화
  • Typescript
    더 나은 타입 체킹과 효율적인 컴파일, custom 플러그인과 타입 체커로 typescript에 대한 지원이 개선됨

 

App Router vs Pages Router

 

Next.js는 두가지 다른 router를 가지고 있다. 

App Router는 서버컴포넌트와 스트리밍과 같은 React의 최신 기능을 사용할 수 있게 해주며, 

Page Router는 원래의 Next.js router이며 서버에서 렌더된 리액트 애플리케이션과 이전의 Next.js 애플리케이션을 위한 지원을 지속할 수 있게 해준다. 



App Router

 

Next.js App Router는 Server Components, Streaming With Suspense, Server Action과 같은 리액트 최신 기능을 사용하는 애플리케이션을 빌드하는 새로운 모델이다. 

 

 

 

자주 묻는 질문 

 

layout에서 어떻게 요청 객체에 접근할 수 있나요? 

 

raw한 요청객체에 의도적으로 접근할 수 는 없으나, server-only 함수에서는 headers와 cookies에 접근할 수 있다. cookies를 설정할 수도 있다. 

 

Layout은 리렌더하지 않는다. 페이지 사이를 옮겨다닐 때 불필요한 계산을 피하기 위해 캐시되고 재사용된다. raw request에 접근하는 것을 막음으로써 Next.js는 잠재적으로 느려지거나 layout의 비용이 나가는 유저의 코드의 실행을 방지할 수 있다. 이것은 퍼포먼스에 악영향을 끼칠 수 있다. 

 

이 디자인은 다른 페이지들 전반의 지속적이고 예측가능한 행동을 강화한다. 이것은 개발과 디버깅을 단순화해준다. 우리가 빌드한 UI패턴에 기반하여 Parallel Routes는 다양한 페이지를 같은 레이아웃에서 렌더할 수 있게 해주고, 페이지는 URL search params뿐만 아니라 route segments로의 접근을 가능하게 해 준다.

 

page에서 URL에 어떻게 접근하나요? 

 

기본적으로 페이지들은 Server Component다. params prop과 searchParams프롭을 통해 URL search params로 route 부분에 접근할 수 있다. 

만약 Client Components를 사용하고 있다면 usePathname, useSelectedLayoutSegment, 보다 복잡한 routes를 위한 useSelectedLayoutSegments를 사용할 수 있다. 

더욱이 우리가 빌드한 UI패턴에 기반하여 Parallel Routes는 다양한 페이지를 같은 레이아웃에서 렌더할 수 있게 해주고, 페이지는 URL search params뿐만 아니라 route segments로의 접근을 가능하게 해 준다.

 

Server Component에서 어떻게 redirect할 수 있나요? 

 

상대 또는 절대 URL 페이지로부터의 리다이렉트를 위해 redirect를 사용할 수 있다. redirect는 일식적인(307) redirect이며, 반면 permanentRedirect는영구적인 (308)redirect이다. 이 함수들이 UI를 스트리밍하고 있는 동안에 사용된다면, 클라이언트 사이드에서 리다이렉트를 내보낼 수 있도록 meta tag를 주입할 것이다. 

 

App Router로 어떻게 authentication을 다룰 수 있나요? 

 

NextAuth.js, Clerk, Lucia, AuthO, Stytch, Kinde, WorkOS 또는 수동으로 sessions나 JWT를 핸들링하는 것

 

어떻게 cookies를 설정할 수 있나요?

 

Server Actions 또는 Route Handlers를 cookies 함수를 사용해 쿠키를 설정할 수 있다. 

HTTP는 streaming이 시작된 뒤에 쿠키를 설정하는 것을 허용하지 않기 때문에 page또는 layout에서 직접적으로 쿠키를 설정할 수 없다. Middleware에서 쿠키를 설정할 수 있다. 

 

어떻게 multi-tenant app을 빌드할 수 있나요?

 

 multi-tenant를 제공하는 개별 Next.js 애플리케이션을 찾고 있다면, 추천하는 architecture를 보여주는 example을 내장했다. 

 

어떻게 App Router cache를 무효화할 수 있나요?

 

Next.js에는 캐싱의 여러 layer가 있으며 게다가 캐시의 다양한 부분을 무효화할 수 있는 여러 방법이 있다. 캐싱을 더 배워보라.