Building App-like Experiences with Next.js 16.3

import
type
{ NextConfig }
from
'next'
;
const
nextConfig
:
NextConfig
=
{
cacheComponents
:
true
,
partialPrefetching
:
true
,
};
export
default
nextConfig;

import
{ cacheLife
,
cacheTag }
from
'next/cache'
;
async
function
getDrop
(id
:
string
) {
'use cache'
;
cacheLife
(
'minutes'
);
cacheTag
(
'drops'
,
`drop-
${
id
}
`
);
const
row
=
await
prisma
.
drop
.findUnique
({ where
:
{ id } });
if
(
!
row)
notFound
();
return
toDrop
(row);
}

import Link from 'next/link';
<Link 
  href={`/track/${track.id}`}
  prefetch={true}
>
  {track.title}
</Link>;

import { NowPlayingBar } from '@/components/now-playing-bar';
import { PlayerProvider } from '@/providers/player-provider';
export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <PlayerProvider>
      {/* ...导航... */}
      <main>{children}</main>
      <NowPlayingBar />
    </PlayerProvider>
  );
}

'use server'
;
import
{ updateTag }
from
'next/cache'
;
import
{ verifyAuth }
from
'@/features/user/user-queries'
;
export
async
function
toggleRepost
(dropId
:
string
) {
const
me
=
await
verifyAuth
();
// ...在数据库中创建或删除重发...
updateTag
(
`drop-
${
dropId
}
`
);
updateTag
(
`user-drops-
${
me
}
`
);
// ...使其他受影响的视图过期...
return
{ ok
:
true
as
const
};
}

import
type
{ NextConfig }
from
'next'
;
const
nextConfig
:
NextConfig
=
{
cacheComponents
:
true
,
partialPrefetching
:
true
,
experimental
:
{
useOffline
:
true
,
}
,
};
export
default
nextConfig;

import
{ Suspense }
from
'react'
;
<
Suspense
fallback
=
{<
DropDetailSkeleton
/>}>
{
params
.then
(({ id })
=>
(
<>
<
DropDetail
id
=
{id} />
<
Suspense
fallback
=
{<
RepliesSkeleton
/>}>
<
Replies
id
=
{id} />
</
Suspense
>
</>
))}
</
Suspense
>;

'use client'
;
import
{ useOptimistic
,
useTransition }
from
'react'
;
import
{ toggleFavorite }
from
'@/features/track/track-actions'
;
export
function
FavoriteButton
({ trackId
,
isFavorite }
:
FavoriteButtonProps
) {
const
[
,
startTransition
]
=
useTransition
();
const
[
optimisticFavorite
,
setOptimisticFavorite
]
=
useOptimistic
(isFavorite);
function
handleToggle
() {
startTransition
(
async
()
=>
{
setOptimisticFavorite
(
!
optimisticFavorite);
await
toggleFavorite
(trackId);
});
}
return
(
<
button
aria-pressed
=
{optimisticFavorite}
onClick
=
{handleToggle}>
Favorite
</
button
>
);
}

<
CalendarEventsProvider
>
<
Suspense
fallback
=
{<
CalendarViewFallback
/>}>
{
Promise
.all
([params
,
searchParams])
.then
(([{ date }
,
{ view }])
=>
toView
(view)
===
'month'
?
(
<
CalendarMonth
date
=
{date} />
)
:
(
<
CalendarWeek
date
=
{date} />
)
,
)}
</
Suspense
>
</
CalendarEventsProvider
>

'use client';
import
{
startTransition
,
type
ReactNode
,
useActionState
,
useOptimistic
,
}
from
'react';
import
{ toast }
from
'sonner';
import
{ saveEventChange }
from
'@/features/calendar/calendar-actions';
import
type
{ EventChange }
from
'@/features/calendar/types/calendar';
// ...context declarations...
export
function
CalendarEventsProvider
({ children }
:
{ children
:
ReactNode
}) {
const
[
,
dispatch
]
=
useActionState
(
async
(_
:
void
,
change
:
EventChange
)
=>
{
const
result
=
await
saveEventChange
(change);
if
(
result
.error) {
toast
.error
(
result
.error);
}
// ...success toasts...
}
,
undefined
);
const
[
pendingChanges
,
addOptimisticChange
]
=
useOptimistic
<
EventChange[]
,
EventChange
>
([]
,
(changes
,
change)
=>
[
...
changes
,
change]);
function
mutate
(change
:
EventChange
) {
startTransition
(()
=>
{
addOptimisticChange
(change);
dispatch
(change);
});
}
return
(
<
CalendarEventsContext
value
=
{{ pendingChanges
,
mutate }}>
{children}
</
CalendarEventsContext
>
);
}

import
{ preload
,
SWRConfig }
from
'swr';
import
{ messageKeys }
from
'@/features/message/message-cache';
import
{ getMessagesForUser }
from
'@/features/message/message-queries';
export
async
function
MessageThread
({ channelId }
:
{ channelId
:
string
}) {
const
user
=
await
getCurrentUser
();
const
messageData
=
preload
(
messageKeys
.channel
(channelId)
,
()
=>
getMessagesForUser
(channelId
,
user
.id)
,
);
return
(
<
SWRConfig
value
=
{{ cacheData
:
{
...
messageData } }}>
<
MessageList
channelId
=
{channelId} />
</
SWRConfig
>
);
}

'use client';
import
useSWR
from
'swr';
import
{ messageKeys }
from
'@/features/message/message-cache';
import
{ fetchJson }
from
'@/lib/fetch-json';
export
function
useSuspenseMessages
(channelId
:
string
) {
return
useSWR
(
messageKeys
.channel
(channelId)
,
fetchJson
,
{
refreshInterval
:
10_000
,
suspense
:
true
,
});
}

import
{ ViewTransition
,
type
ReactNode }
from
'react'
;
export
function
Crossfade
({ children }
:
{ children
:
ReactNode
}) {
return
(
<
ViewTransition
enter
=
"auto"
default
=
"none"
>
{children}
</
ViewTransition
>
);
}

import
{ Suspense }
from
'react'
;
<
Suspense
fallback
=
{<
DropDetailSkeleton
/>}>
<
Crossfade
>
<
DropDetail
id
=
{id} />
<
Suspense
fallback
=
{<
RepliesSkeleton
/>}>
<
Crossfade
>
<
Replies
id
=
{id} />
</
Crossfade
>
</
Suspense
>
</
Crossfade
>
</
Suspense
>;

import
{ ViewTransition }
from
'react'
;
{
tracks
.map
((track
,
i)
=>
(
<
ViewTransition
key
=
{
track
.id}>
<
div
className
=
"transition-opacity has-data-removing:opacity-50"
>
<
TrackRow
track
=
{track}
index
=
{i}
queue
=
{tracks} />
</
div
>
</
ViewTransition
>
));
}

<
ViewTransition
>
<
section
>
<
h2
>You Might Also Like</
h2
>
<
Discover
/>
</
section
>
</
ViewTransition
>

import
Link
from
'next/link'
;
<
Link
href
=
{
calendarHref
(previous
,
view)}
prefetch
=
{
true
}
transitionTypes
=
{[
'nav-back'
]}
>
Previous {period}
</
Link
>
<
Link
href
=
{
calendarHref
(next
,
view)}
prefetch
=
{
true
}
transitionTypes
=
{[
'nav-forward'
]}
>
Next {period}
</
Link
>

import
{ ViewTransition }
from
'react'
;
import
type
{ ReactNode }
from
'react'
;
const
directionalSlide
=
{
'nav-back'
:
'nav-back'
,
'nav-forward'
:
'nav-forward'
,
default
:
'none'
,
};
export
function
DirectionalSlide
({
children
,
name
,
}
:
{
children
:
ReactNode
;
name
:
string
;
}) {
return
(
<
ViewTransition
default
=
"none"
name
=
{name}
share
=
{directionalSlide}>
{children}
</
ViewTransition
>
);
}

@keyframes
slide {
from {
translate
:
var
(--slide-offset)
;
}
}
::view-transition-old(
.nav-forward
) {
--slide-offset
:
-60
px
;
animation
:
200
ms
ease-in-out both slide reverse
;
}
::view-transition-new(
.nav-forward
) {
--slide-offset
:
60
px
;
animation
:
200
ms
ease-in-out both slide
;
}

import
{ instant }
from
'@next/playwright'
;
await
page
.goto
(
'/'
);
await
instant
(page
,
async
()
=>
{
await
page
.getByRole
(
'link'
,
{ name
:
'Library'
})
.click
();
await
page
.waitForURL
(
'/library'
);
await
expect
(
page
.getByRole
(
'heading'
,
{ name
:
'Library'
}))
.toBeVisible
();
});