[Next.js] App Router

https://nextjs.org/docs/app 번역

App Router | Next.js

Next.js의 앱 라우터는 React의 최신 기능을 이용한 앱을 개발하기 위한 새로운 패러다임이다. Next.js에 이미 익숙하다면, 앱 라우터는 파일시스템 기반의 페이지 라우터의 자연스러운 진화임을 알 수 있을 것이다.

 

새로운 앱에 대해, 앱 라우터를 사용할 것을 추천한다. 이미 존재하던 앱에 대해서는 점진적으로 앱 라우터를 적용할 수 있다. 하나의 앱 안에서 두 종류의 라우터를 모두 사용하는 것도 가능하다.

---

FAQs

Layout에서 요청 객체에 어떻게 접근하나요?

원본 요청 객체에 의도적으로 접근할 수는 없다. 그러나, server-only 함수를 통해 요청의 헤더와 쿠키에는 접근할 수 있으며, 또한 쿠키를 세팅할 수 도 있다.

Layout은 재렌더링되지 않는다. 이는 불필요한 연산을 줄이기 위해 캐싱되어 재사용된다. Layout에서 원본 요청에 접근하는 것을 제한함에 따라, Next.js는 퍼포먼스의 저하를 일으킬 수 있는 실행이 느리거나 이에 드는 비용이 큰 유저 코드의 실행을 예방한다.

이러한 디자인은 여러 페이지에 걸친 Layout이 일관적이고 예상 가능하게 동작하게 할 것을 강제함으로서 개발과 디버깅을 단순화한다.

UI 패턴에 따라 병렬 라우트(Parallel Routes)를 사용하면 여러 페이지를 같은 Layout 안에서 렌더링할 수 있으며, 페이지들은 라우트 세그먼트와 URL 검색 파라미터에 접근할 수 있다.

페이지의 URL에 어떻게 접근하나요?

 기본적으로 페이지들은 서버 컴포넌트이다. 페이지의 'params' 프롭을 통해 라우트 세그먼트에 접근할 수 있으며, 'searchParams' 프롭을 통해 URL 검색 파라미터에 접근할 수 있다.

클라이언트 컴포넌트를 사용하고 있다면, 'usePathname', 'useSelectedLayoutSegment', 'useSelectedLayoutSegments'를 사용할 수 있다.

서버 컴포넌트에서 어떻게 리다이렉트를 수행할 수 있나요?

'redirect' 를 통해 상대URL혹은 절대URL로 리다이렉트할 수 있다. redirect는 임시(307) 리다이렉트, permanentRedirect는 영구(308)리다이렉트이다. 스트리밍 UI를 사용하는 동안 이러한 함수들이 사용되면, 클라이언트 측에서 리디렉션을 발생시키기 위한 메타 태그를 삽입할 것이다.

앱 라우터를 사용할 때 인증은 어떻게 처리하나요?

https://next-auth.js.org/configuration/nextjs#in-app-router

Next.js | NextAuth.js

https://clerk.com/docs/quickstarts/nextjs

Use Clerk with Next.js | Clerk

https://github.com/auth0/nextjs-auth0#app-router

GitHub - auth0/nextjs-auth0: Next.js SDK for signing in with Auth0

https://stytch.com/docs/example-apps/frontend/nextjs

Stytch - Auth platform for developers

혹은, 수동으로 세션이나 JWT 토큰을 통해 핸들링 가능하다.

 

쿠키는 어떻게 세팅하나요?

1. Server Actions

https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#setting-cookies

Data Fetching: Forms and Mutations | Next.js

2. Route Handlers

https://nextjs.org/docs/app/building-your-application/routing/route-handlers

Routing: Route Handlers | Next.js