Add `transitionTypes` prop to `next/link` by eps1lon · Pull Request #90701 · vercel/next.js

eps1lon · 2026-02-28T19:21:57Z

transitionTypes is an array of strings that specifies the types of transitions to apply when navigating to the linked page. React.addTransitionType is called during the navigation Transition for each specified type.

Only App router supports transitionTypes since Pages router does not use Transitions for navigation. Next.js just ignores transitionTypes on Pages router links to support creating shared link Components.

We don't need to flag this since addTransitionType is already in Canary.

See https://react.dev/reference/react/addTransitionType

@acdlite suggested adding a navigateAction prop instead from which addTransitionType would have to be called. However, that would require adding another server-client boundary. <Link navigateAction={() => addTransitionType('slide')} /> would not work in react-server since functions can't be passed from Server to Client. Neither navigateAction nor transitionTypes solve enabling view transitions for MPA navigations though.

Test plan

Manual fixture shows sliding animation

CleanShot.2026-02-28.at.20.17.05.mp4

nextjs-bot · 2026-02-28T19:52:54Z

Stats from current PR

🔴 1 regression

Metric	Canary	PR	Change	Trend
node_modules Size	476 MB	476 MB	🔴 +49.1 kB (+0%)	█████

📊 All Metrics

📖 Metrics Glossary

Dev Server Metrics:

Listen = TCP port starts accepting connections
First Request = HTTP server returns successful response
Cold = Fresh build (no cache)
Warm = With cached build artifacts

Build Metrics:

Fresh = Clean build (no .next directory)
Cached = With existing .next directory

Change Thresholds:

Time: Changes < 50ms AND < 10%, OR < 2% are insignificant
Size: Changes < 1KB AND < 1% are insignificant
All other changes are flagged to catch regressions

⚡ Dev Server

Metric	Canary	PR	Change	Trend
Cold (Listen)	508ms	508ms	✓	▁▁▁▇▁
Cold (Ready in log)	494ms	483ms	✓	▁▁▁▇▁
Cold (First Request)	1.059s	1.035s	✓	▃▃▃▇▃
Warm (Listen)	507ms	507ms	✓	▁▁▁█▁
Warm (Ready in log)	492ms	493ms	✓	▁▁▁█▁
Warm (First Request)	402ms	399ms	✓	▁▁▁█▁

📦 Dev Server (Webpack) (Legacy)

📦 Dev Server (Webpack)

Metric	Canary	PR	Change	Trend
Cold (Listen)	508ms	506ms	✓	█▅▁▁▁
Cold (Ready in log)	484ms	478ms	✓	█▅▃▃▄
Cold (First Request)	2.203s	2.201s	✓	█▄▂▂▂
Warm (Listen)	508ms	508ms	✓	█▅▁▁▁
Warm (Ready in log)	482ms	482ms	✓	█▄▂▃▃
Warm (First Request)	2.227s	2.227s	✓	█▄▂▁▁

⚡ Production Builds

Metric	Canary	PR	Change	Trend
Fresh Build	4.505s	4.542s	✓	▁▁▁▆▁
Cached Build	4.560s	4.539s	✓	▁▁▁▇▁

📦 Production Builds (Webpack) (Legacy)

📦 Production Builds (Webpack)

Metric	Canary	PR	Change	Trend
Fresh Build	16.122s	16.060s	✓	█▄▁▁▁
Cached Build	16.126s	16.155s	✓	█▄▁▁▁
node_modules Size	476 MB	476 MB	🔴 +49.1 kB (+0%)	█████

📦 Bundle Sizes

Bundle Sizes

⚡ Turbopack

Client

Main Bundles: **401 kB** → **401 kB** ⚠️ +23 B

80 files with content-based hashes (individual files not comparable between builds)

Server

Middleware

	Canary	PR	Change
middleware-b..fest.js gzip	765 B	761 B	✓
Total	765 B	761 B	✅ -4 B

Build Details

Build Manifests

	Canary	PR	Change
_buildManifest.js gzip	451 B	452 B	✓
Total	451 B	452 B	⚠️ +1 B

📦 Webpack

Client

Main Bundles

	Canary	PR	Change
5528-HASH.js gzip	5.54 kB	N/A	-
6280-HASH.js gzip	58.7 kB	N/A	-
6335.HASH.js gzip	169 B	N/A	-
912-HASH.js gzip	4.59 kB	N/A	-
e8aec2e4-HASH.js gzip	62.6 kB	N/A	-
framework-HASH.js gzip	59.7 kB	59.7 kB	✓
main-app-HASH.js gzip	255 B	253 B	✓
main-HASH.js gzip	39.1 kB	39.1 kB	✓
webpack-HASH.js gzip	1.68 kB	1.68 kB	✓
262-HASH.js gzip	N/A	4.59 kB	-
2889.HASH.js gzip	N/A	169 B	-
5602-HASH.js gzip	N/A	5.55 kB	-
6948ada0-HASH.js gzip	N/A	62.6 kB	-
9544-HASH.js gzip	N/A	59.5 kB	-
Total	232 kB	233 kB	⚠️ +755 B

Polyfills

	Canary	PR	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Total	39.4 kB	39.4 kB	✓

Pages

	Canary	PR	Change
_app-HASH.js gzip	194 B	194 B	✓
_error-HASH.js gzip	183 B	180 B	🟢 3 B (-2%)
css-HASH.js gzip	331 B	330 B	✓
dynamic-HASH.js gzip	1.81 kB	1.81 kB	✓
edge-ssr-HASH.js gzip	256 B	256 B	✓
head-HASH.js gzip	351 B	352 B	✓
hooks-HASH.js gzip	384 B	383 B	✓
image-HASH.js gzip	580 B	581 B	✓
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	2.5 kB	2.51 kB	✓
routerDirect..HASH.js gzip	320 B	319 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	315 B	315 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Total	7.97 kB	7.98 kB	⚠️ +11 B

Server

Edge SSR

	Canary	PR	Change
edge-ssr.js gzip	125 kB	125 kB	✓
page.js gzip	254 kB	255 kB	✓
Total	379 kB	380 kB	⚠️ +911 B

Middleware

	Canary	PR	Change
middleware-b..fest.js gzip	616 B	615 B	✓
middleware-r..fest.js gzip	156 B	155 B	✓
middleware.js gzip	43.8 kB	43.7 kB	✓
edge-runtime..pack.js gzip	842 B	842 B	✓
Total	45.4 kB	45.3 kB	✅ -95 B

Build Details

Build Manifests

	Canary	PR	Change
_buildManifest.js gzip	715 B	718 B	✓
Total	715 B	718 B	⚠️ +3 B

Build Cache

	Canary	PR	Change
0.pack gzip	4.06 MB	4.06 MB	🔴 +6.37 kB (+0%)
index.pack gzip	103 kB	102 kB	🟢 1.36 kB (-1%)
index.pack.old gzip	103 kB	103 kB	✓
Total	4.26 MB	4.27 MB	⚠️ +5.35 kB

🔄 Shared (bundler-independent)

Runtimes

	Canary	PR	Change
app-page-exp...dev.js gzip	321 kB	321 kB	✓
app-page-exp..prod.js gzip	170 kB	170 kB	✓
app-page-tur...dev.js gzip	320 kB	320 kB	✓
app-page-tur..prod.js gzip	170 kB	170 kB	✓
app-page-tur...dev.js gzip	317 kB	317 kB	✓
app-page-tur..prod.js gzip	168 kB	168 kB	✓
app-page.run...dev.js gzip	317 kB	317 kB	✓
app-page.run..prod.js gzip	168 kB	168 kB	✓
app-route-ex...dev.js gzip	70.8 kB	70.8 kB	✓
app-route-ex..prod.js gzip	49.3 kB	49.3 kB	✓
app-route-tu...dev.js gzip	70.9 kB	70.9 kB	✓
app-route-tu..prod.js gzip	49.3 kB	49.3 kB	✓
app-route-tu...dev.js gzip	70.5 kB	70.5 kB	✓
app-route-tu..prod.js gzip	49 kB	49 kB	✓
app-route.ru...dev.js gzip	70.4 kB	70.4 kB	✓
app-route.ru..prod.js gzip	49 kB	49 kB	✓
dist_client_...dev.js gzip	324 B	324 B	✓
dist_client_...dev.js gzip	326 B	326 B	✓
dist_client_...dev.js gzip	318 B	318 B	✓
dist_client_...dev.js gzip	317 B	317 B	✓
pages-api-tu...dev.js gzip	43.2 kB	43.2 kB	✓
pages-api-tu..prod.js gzip	32.9 kB	32.9 kB	✓
pages-api.ru...dev.js gzip	43.2 kB	43.2 kB	✓
pages-api.ru..prod.js gzip	32.9 kB	32.9 kB	✓
pages-turbo....dev.js gzip	52.6 kB	52.6 kB	✓
pages-turbo...prod.js gzip	38.5 kB	38.5 kB	✓
pages.runtim...dev.js gzip	52.6 kB	52.6 kB	✓
pages.runtim..prod.js gzip	38.5 kB	38.5 kB	✓
server.runti..prod.js gzip	61.9 kB	61.9 kB	✓
Total	2.83 MB	2.83 MB	⚠️ +259 B

📝 Changed Files (8 files)

Files with changes:

app-page-exp..ntime.dev.js
app-page-exp..time.prod.js
app-page-tur..ntime.dev.js
app-page-tur..time.prod.js
app-page-tur..ntime.dev.js
app-page-tur..time.prod.js
app-page.runtime.dev.js
app-page.runtime.prod.js

View diffs

app-page-exp..ntime.dev.js

Diff too large to display

app-page-exp..time.prod.js

Diff too large to display

app-page-tur..ntime.dev.js

Diff too large to display

app-page-tur..time.prod.js

Diff too large to display

app-page-tur..ntime.dev.js

Diff too large to display

app-page-tur..time.prod.js

Diff too large to display

app-page.runtime.dev.js

Diff too large to display

app-page.runtime.prod.js

Diff too large to display

📎 Tarball URL

https://vercel-packages.vercel.app/next/commits/f1dbebe1417b13863cf978a4682a4f4c4d779761/next

packages/next/src/client/app-dir/link.tsx

nextjs-bot · 2026-03-01T09:38:40Z

Tests Passed

samselikoff · 2026-03-02T17:20:21Z

Super exciting!!

Assuming it works with anything in React state, e.g.

<Link href="/about" transitionTypes={isFirstNav ? ['slide-in'] : ['slide-down']}>

?

eps1lon · 2026-03-02T19:23:02Z

Assuming it works with anything in React state, e.g.

Yeah, the prop is reactive. The navigation will use the transition types that are committed when the click happens.

`transitionTypes` is an array of strings that specifies the types of transitions to apply when navigating to the linked page. `React.addTransitionType` is called during the navigation Transition for each specified type. See https://react.dev/reference/react/addTransitionType

… pages router Link component, causing it to leak onto the `<a>` DOM element via `restProps` spread. This commit fixes the issue reported at packages/next/src/client/link.tsx:328 **Bug explanation:** In `packages/next/src/client/link.tsx` (the pages router Link component), the `transitionTypes` prop was added to the `InternalLinkProps` type (line 129) and validation logic (line 462), but was NOT included in the destructuring at lines 313-328. The destructuring pattern: ```js const { href, as, children, prefetch, ..., legacyBehavior, ...restProps } = props ``` omits `transitionTypes`, which means when a user passes `<Link href="/about" transitionTypes={['slide-in']}>About</Link>`, the `transitionTypes` value ends up in `restProps`. At line 716, `restProps` is spread onto the rendered `<a>` element: ```jsx <a {...restProps} {...childProps}>{children}</a> ``` This causes React to emit a warning like: "Warning: React does not recognize the `transitionTypes` prop on a DOM element." It also places an invalid attribute on the `<a>` tag in the HTML output. In contrast, the app-dir link at `packages/next/src/client/app-dir/link.tsx` line 362 properly destructures `transitionTypes` out of props before spreading the rest. **Fix explanation:** Added `transitionTypes,` to the destructuring statement at line 328, right before `...restProps`. This ensures the prop is captured in a named variable and excluded from `restProps`, preventing it from being spread onto the DOM `<a>` element. This matches the pattern used in the app-dir version of the Link component. Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com> Co-authored-by: eps1lon <silbermann.sebastian@gmail.com>

addTransitionType is in React Canary and therefore always available in Next.js App Router. Co-authored-by: Sebastian "Sebbie" Silbermann <silbermann.sebastian@gmail.com>

nextjs-bot added created-by: Next.js team PRs by the Next.js team. Documentation Related to Next.js' official documentation. tests type: next labels Feb 28, 2026

eps1lon force-pushed the sebbie/02-28-add_transitiontypes_prop_to_next/link_ branch from ad534c9 to 9a9bd1a Compare February 28, 2026 19:34

This comment was marked as resolved.

Sign in to view

eps1lon added the CI approved Approve running CI for fork label Feb 28, 2026

vercel deleted a comment from nextjs-bot Mar 1, 2026

eps1lon commented Mar 1, 2026

View reviewed changes

packages/next/src/client/app-dir/link.tsx Outdated Show resolved Hide resolved

eps1lon requested review from delbaoliveira and samselikoff March 1, 2026 12:15

eps1lon marked this pull request as ready for review March 1, 2026 12:15

eps1lon requested a review from acdlite March 2, 2026 16:19

samselikoff approved these changes Mar 2, 2026

View reviewed changes

eps1lon and others added 3 commits March 3, 2026 18:17

Remove addTransitionType availability check

f1dbebe

addTransitionType is in React Canary and therefore always available in Next.js App Router. Co-authored-by: Sebastian "Sebbie" Silbermann <silbermann.sebastian@gmail.com>

eps1lon force-pushed the sebbie/02-28-add_transitiontypes_prop_to_next/link_ branch from ff07a6d to f1dbebe Compare March 3, 2026 17:17

eps1lon enabled auto-merge (squash) March 3, 2026 17:19

eps1lon merged commit 296e180 into canary Mar 3, 2026
285 of 287 checks passed

eps1lon deleted the sebbie/02-28-add_transitiontypes_prop_to_next/link_ branch March 3, 2026 18:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `transitionTypes` prop to `next/link`#90701

Add `transitionTypes` prop to `next/link`#90701
eps1lon merged 3 commits intocanaryfrom
sebbie/02-28-add_transitiontypes_prop_to_next/link_

eps1lon commented Feb 28, 2026 •

edited

Loading

Uh oh!

This comment was marked as resolved.

Uh oh!

nextjs-bot commented Feb 28, 2026 •

edited

Loading

⚡ Dev Server

📦 Dev Server (Webpack)

⚡ Production Builds

📦 Production Builds (Webpack)

Bundle Sizes

⚡ Turbopack

📦 Webpack

🔄 Shared (bundler-independent)

Uh oh!

Uh oh!

nextjs-bot commented Mar 1, 2026 •

edited

Loading

Uh oh!

samselikoff commented Mar 2, 2026

Uh oh!

eps1lon commented Mar 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

eps1lon commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test plan

Uh oh!

This comment was marked as resolved.

Uh oh!

nextjs-bot commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stats from current PR

🔴 1 regression

⚡ Dev Server

📦 Dev Server (Webpack)

⚡ Production Builds

📦 Production Builds (Webpack)

Bundle Sizes

⚡ Turbopack

📦 Webpack

🔄 Shared (bundler-independent)

Uh oh!

Uh oh!

nextjs-bot commented Mar 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tests Passed

Uh oh!

samselikoff commented Mar 2, 2026

Uh oh!

eps1lon commented Mar 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

eps1lon commented Feb 28, 2026 •

edited

Loading

nextjs-bot commented Feb 28, 2026 •

edited

Loading

nextjs-bot commented Mar 1, 2026 •

edited

Loading