AppRouter2 Next.js 동적 경로 params와 generateStaticParams 사용법 App Router에서 params.slug에 바로 접근하던 코드가 Next.js 16에서 타입 오류나 런타임 오류를 내면, params를 동기 객체로 쓴 경우가 많아요. params를 Promise로 선언하고 await한 뒤 사용하면 돼요. 빌드할 slug 목록은 generateStaticParams라는 named export로, 페이지 컴포넌트는 default export로 분리해야 해요. 이 글은 cacheComponents를 켜지 않은 기본 설정에서 Next.js 16.3.6, React 19.2.4, TypeScript 5.9.3 기준으로 적어요. /blog/[slug]처럼 URL 일부를 파일명으로 받을 때의 예제예요. 아래 코드는 기존 App Router TypeScript 프로젝트의 app/.. 2023. 9. 26. Next.js 16에서 Link 이동이 느릴 때, loading.tsx와 프리페치 확인 App Router에서 를 눌렀는데 다음 화면이 바로 바뀌지 않는다면, 먼저 개발 서버인지 프로덕션인지 확인하고 해당 경로가 정적인지 동적인지 살펴보세요. 개발 모드에서는 자동 프리페치가 꺼져 있어요. 프로덕션에서 동적 경로에 loading.tsx가 없으면 클릭한 뒤 서버 응답을 기다릴 수 있고, 로딩 경계를 추가하면 그 UI를 먼저 보여 줄 수 있어요.이 글은 2026년 10월 1일 기준 Next.js 16.3.8 App Router를 다뤄요. Next.js 16.3의 새 Instant Navigations 기능은 cacheComponents와 partialPrefetching 설정을 켜야 하는 선택 기능이라, 여기서는 두 설정을 켜지 않은 기본 동작만 설명해요. 활성화된 앱은 프리페치와 로딩 동작이 .. 2023. 8. 17. 이전 1 다음