Commit @95da5073cb733a8037a11e644d6fa6544341bfca

임동욱 07-27

feat: 라우트 전환 애니메이션 기반 추가

Co-Authored-By: Claude Opus 5

@95da5073cb733a8037a11e644d6fa6544341bfca

95da507

app/_types/react-canary.d.ts (added)

+++ app/_types/react-canary.d.ts

...	...	@@ -0,0 +1,4 @@
	1	+// App Router는 React canary 릴리스로 빌드된다(Next.js가 내부적으로 번들) — stable
	2	+// `react` 패키지의 타입에는 없는 `ViewTransition` 등의 타입을 로드하기 위한 참조 전용 파일이다.
	3	+// 런타임 산출물은 없다. tsconfig의 `types` 배열 변경 없이 트리플 슬래시 참조만으로 전역 로드된다.
	4	+/// <reference types="react/canary" />

ae21164

95da507

app/layout.tsx

--- app/layout.tsx

+++ app/layout.tsx


 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { ViewTransition } from "react";
 import "./globals.css";
 
 const geistSans = Geist({

       lang="ko"
       className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col">
+        {/* 라우트 그룹 간 이동을 포함한 모든 전환에 크로스페이드를 적용한다. 클래스명(layout-transition)에
+            대한 `::view-transition-old/new` 규칙은 design 레인이 app/globals.css에 제공한다 — 합류
+            전에는 브라우저 기본 크로스페이드로 동작한다. */}
+        <ViewTransition default="layout-transition">{children}</ViewTransition>
+      </body>
     </html>
   );
 }

ae21164

95da507

next.config.ts

--- next.config.ts

+++ next.config.ts


 ];
 
 const nextConfig: NextConfig = {
+  // 라우트 전환 애니메이션(React `<ViewTransition>`, app/layout.tsx) 활성화 — Next.js 공식
+  // 가이드(view-transitions.md) 권장 방식. 미지원 브라우저에서는 애니메이션 없이 정상 동작한다.
+  experimental: {
+    viewTransition: true,
+  },
   async headers() {
     return [
       {

Add a comment

Open 0
Closed 0

List

...	...	@@ -19,6 +19,11 @@
19	19	];
20	20
21	21	const nextConfig: NextConfig = {
	22	+ // 라우트 전환 애니메이션(React `<ViewTransition>`, app/layout.tsx) 활성화 — Next.js 공식
	23	+ // 가이드(view-transitions.md) 권장 방식. 미지원 브라우저에서는 애니메이션 없이 정상 동작한다.
	24	+ experimental: {
	25	+ viewTransition: true,
	26	+ },
22	27	async headers() {
23	28	return [
24	29	{

...	...	@@ -1,5 +1,6 @@
1	1	import type { Metadata } from "next";
2	2	import { Geist, Geist_Mono } from "next/font/google";
	3	+import { ViewTransition } from "react";
3	4	import "./globals.css";
4	5
5	6	const geistSans = Geist({
...	...	@@ -42,7 +43,12 @@
42	43	lang="ko"
43	44	className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
44	45	>
45		- <body className="min-h-full flex flex-col">{children}</body>
	46	+ <body className="min-h-full flex flex-col">
	47	+ {/* 라우트 그룹 간 이동을 포함한 모든 전환에 크로스페이드를 적용한다. 클래스명(layout-transition)에
	48	+ 대한 `::view-transition-old/new` 규칙은 design 레인이 app/globals.css에 제공한다 — 합류
	49	+ 전에는 브라우저 기본 크로스페이드로 동작한다. */}
	50	+ <ViewTransition default="layout-transition">{children}</ViewTransition>
	51	+ </body>
46	52	</html>
47	53	);
48	54	}

Delete comment