npm - next - Versions diffs - 16.2.9 → 16.2.10 - Mend

next 16.2.9 → 16.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/dist/docs/01-app/01-getting-started/02-project-structure.md CHANGED Viewed

@@ -122,7 +122,7 @@ Use `@slot` for named slots rendered by a parent layout. Use intercept patterns
 | [`favicon`](/docs/app/api-reference/file-conventions/metadata/app-icons#favicon)                                | `.ico`                              | Favicon file             |
 | [`icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#icon)                                      | `.ico` `.jpg` `.jpeg` `.png` `.svg` | App Icon file            |
 | [`icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx)       | `.js` `.ts` `.tsx`                  | Generated App Icon       |
-| [`apple-icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#apple-icon)                          | `.jpg` `.jpeg`, `.png`              | Apple App Icon file      |
+| [`apple-icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#apple-icon)                          | `.jpg` `.jpeg` `.png`               | Apple App Icon file      |
 | [`apple-icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx) | `.js` `.ts` `.tsx`                  | Generated Apple App Icon |
 #### Open Graph and Twitter images

package/dist/docs/01-app/01-getting-started/03-layouts-and-pages.md CHANGED Viewed

@@ -287,10 +287,11 @@ You can use the [`<Link>` component](/docs/app/api-reference/components/link) to
 For example, to generate a list of blog posts, import `<Link>` from `next/link` and pass a `href` prop to the component:
-```tsx filename="app/ui/post.tsx" highlight={1,10} switcher
+```tsx filename="app/ui/post.tsx" highlight={1,2,11} switcher
 import Link from 'next/link'
+import { getPosts } from '@/lib/posts'
-export default async function Post({ post }) {
+export default async function Posts() {
   const posts = await getPosts()
   return (
@@ -305,10 +306,11 @@ export default async function Post({ post }) {
 }
 ```
-```jsx filename="app/ui/post.js" highlight={1,10}  switcher
+```jsx filename="app/ui/post.js" highlight={1,2,11} switcher
 import Link from 'next/link'
+import { getPosts } from '@/lib/posts'
-export default async function Post({ post }) {
+export default async function Posts() {
   const posts = await getPosts()
   return (

package/dist/docs/01-app/01-getting-started/04-linking-and-navigating.md CHANGED Viewed

@@ -65,7 +65,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 ```jsx filename="app/layout.js" switcher
 import Link from 'next/link'
-export default function Layout() {
+export default function Layout({ children }) {
   return (
     <html>
       <body>

package/dist/docs/01-app/01-getting-started/05-server-and-client-components.md CHANGED Viewed

@@ -14,7 +14,7 @@ This page explains how Server and Client Components work in Next.js and when to
 ## When to use Server and Client Components?
-The client and server environments have different capabilities. Server and Client components allow you to run logic in each environment depending on your use case.
+The client and server environments have different capabilities. Server and Client Components allow you to run logic in each environment depending on your use case.
 Use **Client Components** when you need:

package/dist/docs/01-app/01-getting-started/07-mutating-data.md CHANGED Viewed

@@ -2,15 +2,16 @@
 title: Mutating Data
 description: Learn how to mutate data using Server Functions and Server Actions in Next.js.
 related:
-  title: API Reference
-  description: Learn more about the features mentioned in this page by reading the API Reference.
+  title: Next steps
+  description: Learn more about Server Actions and the APIs mentioned in this page.
   links:
+    - app/guides/server-actions
     - app/api-reference/functions/revalidatePath
     - app/api-reference/functions/revalidateTag
     - app/api-reference/functions/redirect
 ---
-You can mutate data in Next.js using [React Server Functions](https://react.dev/reference/rsc/server-functions). This page will go through how you can [create](#creating-server-functions) and [invoke](#invoking-server-functions) Server Functions.
+You can mutate data in Next.js using [React Server Functions](https://react.dev/reference/rsc/server-functions). This page will go through how you can [create](#creating-server-functions) and [invoke](#invoking-server-functions) Server Functions. For Next.js-specific behaviors (single-roundtrip response, sequential dispatch, security, deployment), see [Server Actions and Mutations](/docs/app/guides/server-actions).
 ## What are Server Functions?

package/dist/docs/01-app/01-getting-started/09-revalidating.md CHANGED Viewed

@@ -35,14 +35,15 @@ export async function getProducts() {
 `cacheLife` accepts a profile name or a custom configuration object:
-| Profile   | `stale` | `revalidate` | `expire`    |
-| --------- | ------- | ------------ | ----------- |
-| `seconds` | 0       | 1s           | 60s         |
-| `minutes` | 5m      | 1m           | 1h          |
-| `hours`   | 5m      | 1h           | 1d          |
-| `days`    | 5m      | 1d           | 1w          |
-| `weeks`   | 5m      | 1w           | 30d         |
-| `max`     | 5m      | 30d          | ~indefinite |
+| Profile   | `stale` | `revalidate` | `expire` |
+| --------- | ------- | ------------ | -------- |
+| `default` | 5m      | 15m          | never    |
+| `seconds` | 30s     | 1s           | 60s      |
+| `minutes` | 5m      | 1m           | 1h       |
+| `hours`   | 5m      | 1h           | 1d       |
+| `days`    | 5m      | 1d           | 1w       |
+| `weeks`   | 5m      | 1w           | 30d      |
+| `max`     | 5m      | 30d          | 1y       |
 For fine-grained control, pass an object:

package/dist/docs/01-app/01-getting-started/13-fonts.md CHANGED Viewed

@@ -93,7 +93,7 @@ export default function MyApp({ Component, pageProps }) {
 ## Google fonts
-You can automatically self-host any Google Font. Fonts are included stored as static assets and served from the same domain as your deployment, meaning no requests are sent to Google by the browser when the user visits your site.
+You can automatically self-host any Google Font. Fonts are included as static assets and served from the same domain as your deployment, meaning no requests are sent to Google by the browser when the user visits your site.
 To start using a Google Font, import your chosen font from `next/font/google`:

package/dist/docs/01-app/01-getting-started/14-metadata-and-og-images.md CHANGED Viewed

@@ -162,17 +162,23 @@ import { getPost } from '@/app/lib/data'
 export async function generateMetadata({
   params,
 }: {
-  params: { slug: string }
+  params: Promise<{ slug: string }>
 }) {
-  const post = await getPost(params.slug)
+  const { slug } = await params
+  const post = await getPost(slug)
   return {
     title: post.title,
     description: post.description,
   }
 }
-export default async function Page({ params }: { params: { slug: string } }) {
-  const post = await getPost(params.slug)
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+  const post = await getPost(slug)
   return <div>{post.title}</div>
 }
 ```
@@ -181,7 +187,8 @@ export default async function Page({ params }: { params: { slug: string } }) {
 import { getPost } from '@/app/lib/data'
 export async function generateMetadata({ params }) {
-  const post = await getPost(params.slug)
+  const { slug } = await params
+  const post = await getPost(slug)
   return {
     title: post.title,
     description: post.description,
@@ -189,7 +196,8 @@ export async function generateMetadata({ params }) {
 }
 export default async function Page({ params }) {
-  const post = await getPost(params.slug)
+  const { slug } = await params
+  const post = await getPost(slug)
   return <div>{post.title}</div>
 }
 ```
@@ -264,8 +272,13 @@ export const size = {
 export const contentType = 'image/png'
 // Image generation
-export default async function Image({ params }: { params: { slug: string } }) {
-  const post = await getPost(params.slug)
+export default async function Image({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+  const post = await getPost(slug)
   return new ImageResponse(
     (
@@ -302,7 +315,8 @@ export const contentType = 'image/png'
 // Image generation
 export default async function Image({ params }) {
-  const post = await getPost(params.slug)
+  const { slug } = await params
+  const post = await getPost(slug)
   return new ImageResponse(
     (

package/dist/docs/01-app/01-getting-started/17-deploying.md CHANGED Viewed

@@ -39,7 +39,7 @@ Node.js deployments support all Next.js features. Learn how to [configure them](
 ## Docker
-Next.js can be deployed to any provider that supports [Docker](https://www.docker.com/) containers. This includes container orchestrators like Kubernetes or a cloud provider that runs Docker. For containerization best practices, see the [Docker guide for React.js](https://docs.docker.com/guides/reactjs/).
+Next.js can be deployed to any provider that supports [Docker](https://www.docker.com/) containers. This includes container orchestrators like Kubernetes or a cloud provider that runs Docker. For best practices on containerizing your app, refer to Docker's official [Next.js](https://docs.docker.com/guides/nextjs) and [React.js](https://docs.docker.com/guides/reactjs) guides.
 Docker deployments support all Next.js features. Learn how to [configure them](/docs/app/guides/self-hosting) for your infrastructure.

package/dist/docs/01-app/02-guides/authentication.md CHANGED Viewed

@@ -749,16 +749,16 @@ import { cookies } from 'next/headers'
 import { decrypt } from '@/app/lib/session'
 export async function updateSession() {
-  const session = (await cookies()).get('session')?.value
+  const cookieStore = await cookies()
+  const session = cookieStore.get('session')?.value
   const payload = await decrypt(session)
   if (!session || !payload) {
     return null
   }
-  const expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)(
-    await cookies()
-  ).set('session', session, {
+  const expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+  cookieStore.set('session', session, {
     httpOnly: true,
     secure: true,
     expires: expires,
@@ -1120,7 +1120,7 @@ While Proxy can be useful for initial checks, it should not be your only line of
 > **Tips**:
 >
-> - In Proxy, you can also read cookies using `req.cookies.get('session').value`.
+> - In Proxy, you can also read cookies using `req.cookies.get('session')?.value`.
 > - Proxy uses the Node.js runtime, check if your Auth library and session management library are compatible. You may need to use [Middleware](https://github.com/vercel/next.js/blob/v15.5.6/docs/01-app/03-api-reference/03-file-conventions/middleware.mdx) if your Auth library only supports [Edge Runtime](/docs/app/api-reference/edge)
 > - You can use the `matcher` property in the Proxy to specify which routes Proxy should run on. Although, for auth, it's recommended Proxy runs on all routes.

package/dist/docs/01-app/02-guides/backend-for-frontend.md CHANGED Viewed

@@ -351,9 +351,9 @@ export async function POST(request: Request) {
   try {
     const clonedRequest = request.clone()
-    await request.body()
-    await clonedRequest.body()
-    await request.body() // Throws error
+    await request.text()
+    await clonedRequest.text()
+    await request.text() // Throws error
     return new Response(null, { status: 204 })
   } catch {
@@ -367,9 +367,9 @@ export async function POST(request) {
   try {
     const clonedRequest = request.clone()
-    await request.body()
-    await clonedRequest.body()
-    await request.body() // Throws error
+    await request.text()
+    await clonedRequest.text()
+    await request.text() // Throws error
     return new Response(null, { status: 204 })
   } catch {
@@ -612,7 +612,13 @@ export async function GET(request: NextRequest) {
   const token = request.nextUrl.searchParams.get('session_token')
   const redirectUrl = request.nextUrl.searchParams.get('redirect_url')
-  const response = NextResponse.redirect(new URL(redirectUrl, request.url))
+  const destination = new URL(redirectUrl ?? '/', request.url)
+  // Prevent open redirects: only allow same-origin destinations
+  if (destination.origin !== request.nextUrl.origin) {
+    return new Response('Invalid redirect', { status: 400 })
+  }
+  const response = NextResponse.redirect(destination)
   response.cookies.set({
     value: token,
@@ -634,7 +640,13 @@ export async function GET(request) {
   const token = request.nextUrl.searchParams.get('session_token')
   const redirectUrl = request.nextUrl.searchParams.get('redirect_url')
-  const response = NextResponse.redirect(new URL(redirectUrl, request.url))
+  const destination = new URL(redirectUrl ?? '/', request.url)
+  // Prevent open redirects: only allow same-origin destinations
+  if (destination.origin !== request.nextUrl.origin) {
+    return new Response('Invalid redirect', { status: 400 })
+  }
+  const response = NextResponse.redirect(destination)
   response.cookies.set({
     value: token,

package/dist/docs/01-app/02-guides/cdn-caching.md CHANGED Viewed

@@ -27,7 +27,7 @@ CDNs that respect `s-maxage` and `stale-while-revalidate` can cache static and I
 ### Static assets
-Static assets (JavaScript, CSS, images, fonts) served from `/_next/static/` include content hashes in their filenames and have a 1 year `max-age` and `immutable` directive: `public,max-age=31536000,immutable`
+Static assets (JavaScript, CSS, images, fonts) served from `/_next/static/` include content hashes in their filenames and have a 1 year `max-age` and `immutable` directive: `public, max-age=31536000, immutable`
 You can use [`assetPrefix`](/docs/app/api-reference/config/next-config-js/assetPrefix) to serve static assets from a different domain or CDN origin.

package/dist/docs/01-app/02-guides/custom-server.md CHANGED Viewed

@@ -10,7 +10,7 @@ Next.js includes its own server with `next start` by default. If you have an exi
 > **Good to know**:
 >
-> - Before deciding to use a custom server, keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like **[Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization).**
+> - Before deciding to use a custom server, keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements.
 > - When using standalone output mode, it does not trace custom server files. This mode outputs a separate minimal `server.js` file, instead. These cannot be used together.
 Take a look at the [following example](https://github.com/vercel/next.js/tree/canary/examples/custom-server) of a custom server:

package/dist/docs/01-app/02-guides/data-security.md CHANGED Viewed

@@ -9,6 +9,7 @@ related:
     - app/guides/authentication
     - app/guides/content-security-policy
     - app/guides/forms
+    - app/guides/server-actions
 ---
 [React Server Components](https://react.dev/reference/rsc/server-components) improve performance and simplify data fetching, but also shift where and how data is accessed, changing some of the traditional security assumptions for handling data in frontend apps.
@@ -33,7 +34,7 @@ You should follow a **Zero Trust** model when adopting Server Components in an e
 import { cookies } from 'next/headers'
 export default async function Page() {
-  const cookieStore = cookies()
+  const cookieStore = await cookies()
   const token = cookieStore.get('AUTH_TOKEN')?.value
   const res = await fetch('https://api.example.com/profile', {
@@ -73,7 +74,8 @@ import { cookies } from 'next/headers'
 // Component to Server Component which minimizes risk of passing it to a Client
 // Component.
 export const getCurrentUser = cache(async () => {
-  const token = cookies().get('AUTH_TOKEN')
+  const cookieStore = await cookies()
+  const token = cookieStore.get('AUTH_TOKEN')
   const decodedToken = await decryptAndValidate(token)
   // Don't include secret tokens or private information as public fields.
   // Use classes to avoid accidentally passing the whole object to the client.
@@ -116,12 +118,13 @@ export async function getProfileDTO(slug: string) {
 ```
 ```tsx filename="app/page.tsx"
-import { getProfile } from '../../data/user'
+import { getProfileDTO } from '../../data/user-dto'
-export async function Page({ params: { slug } }) {
+export default async function Page({ params }) {
+  const { slug } = await params
   // This page can now safely pass around this profile knowing
   // that it shouldn't contain anything sensitive.
-  const profile = await getProfile(slug);
+  const profile = await getProfileDTO(slug)
   ...
 }
 ```
@@ -137,7 +140,8 @@ This approach, however, makes it easier to accidentally expose private data to t
 ```tsx filename="app/page.tsx"
 import Profile from './components/profile.tsx'
-export async function Page({ params: { slug } }) {
+export default async function Page({ params }) {
+  const { slug } = await params
   const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`
   const userData = rows[0]
   // EXPOSED: This exposes all the fields in userData to the client because
@@ -184,10 +188,11 @@ import { getUser } from '../data/user'
 import Profile from './ui/profile'
 export default async function Page({
-  params: { slug },
+  params,
 }: {
-  params: { slug: string }
+  params: Promise<{ slug: string }>
 }) {
+  const { slug } = await params
   const publicProfile = await getUser(slug)
   return <Profile user={publicProfile} />
 }
@@ -307,7 +312,7 @@ You should always validate input from client, as they can be easily modified. Fo
 ```tsx filename="app/page.tsx"
 // BAD: Trusting searchParams directly
 export default async function Page({ searchParams }) {
-  const isAdmin = searchParams.get('isAdmin')
+  const isAdmin = (await searchParams).isAdmin
   if (isAdmin === 'true') {
     // Vulnerable: relies on untrusted client data
     return <AdminPanel />
@@ -319,7 +324,8 @@ import { cookies } from 'next/headers'
 import { verifyAdmin } from './auth'
 export default async function Page() {
-  const token = cookies().get('AUTH_TOKEN')
+  const cookieStore = await cookies()
+  const token = cookieStore.get('AUTH_TOKEN')
   const isAdmin = await verifyAdmin(token)
   if (isAdmin) {
@@ -565,8 +571,9 @@ Mutations (e.g. logging out users, updating databases, invalidating caches) shou
 ```tsx filename="app/page.tsx"
 // BAD: Triggering a mutation during rendering
 export default async function Page({ searchParams }) {
-  if (searchParams.get('logout')) {
-    cookies().delete('AUTH_TOKEN')
+  if ((await searchParams).logout) {
+    const cookieStore = await cookies()
+    cookieStore.delete('AUTH_TOKEN')
   }
   return <UserProfile />