Merge branch 'canary' into patch-2

Author: Ethan-Arrowood

docs/02-app/01-building-your-application/05-styling/03-css-in-js.mdx

@@ -16,6 +16,7 @@ The following libraries are supported in Client Components in the `app` director
 - [`chakra-ui`](https://chakra-ui.com/getting-started/nextjs-app-guide)
 - [`kuma-ui`](https://kuma-ui.com)
 - [`@mui/material`](https://mui.com/material-ui/guides/next-js-app-router/)
+- [`@mui/joy`](https://mui.com/joy-ui/integrations/next-js-app-router/)
 - [`pandacss`](https://panda-css.com)
 - [`styled-jsx`](#styled-jsx)
 - [`styled-components`](#styled-components)

docs/02-app/01-building-your-application/09-authentication/index.mdx

@@ -332,15 +332,22 @@ Once a user is authenticated, you'll need to ensure the user is allowed to visit
 
 Here's how to implement Middleware for authentication in Next.js:
 
-1. **Setting Up Middleware:**
-   - Create a `middleware.ts` or `.js` file in your project's root directory.
-   - Include logic to authorize user access, such as checking for authentication tokens.
-2. **Defining Protected Routes:**
-   - Not all routes require authorization. Use the `matcher` option in your Middleware to specify any routes that do not require authorization checks.
-3. **Middleware Logic:**
-   - Write logic to verify if a user is authenticated. Check user roles or permissions for route authorization.
-4. **Handling Unauthorized Access:**
-   - Redirect unauthorized users to a login or error page as appropriate.
+#### Setting Up Middleware:
+
+- Create a `middleware.ts` or `.js` file in your project's root directory.
+- Include logic to authorize user access, such as checking for authentication tokens.
+
+#### Defining Protected Routes:
+
+- Not all routes require authorization. Use the `matcher` option in your Middleware to specify any routes that do not require authorization checks.
+
+#### Middleware Logic:
+
+- Write logic to verify if a user is authenticated. Check user roles or permissions for route authorization.
+
+#### Handling Unauthorized Access:
+
+- Redirect unauthorized users to a login or error page as appropriate.
 
 Example Middleware file:
 

examples/with-docker/Dockerfile

@@ -22,6 +22,8 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+RUN mkdir -p public
+
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
@@ -45,17 +47,17 @@ ENV NODE_ENV production
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-COPY --from=builder /app/public ./public
-
-# Set the correct permission for prerender cache
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
+# Set the correct permission for prerender cache
+RUN mkdir -p .next/cache
+RUN chown -R nextjs:nodejs .next
+RUN chmod -R 777 .next/cache
+
 USER nextjs
 
 EXPOSE 3000

examples/with-strict-csp/middleware.js

@@ -4,7 +4,9 @@ export function middleware(request) {
   const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
   const cspHeader = `
     default-src 'self';
-    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
+    script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https: http: 'unsafe-inline' ${
+    process.env.NODE_ENV === "production" ? "" : `'unsafe-eval'`
+  };
     style-src 'self' 'nonce-${nonce}';
     img-src 'self' blob: data:;
     font-src 'self';

packages/next/src/server/config.ts

@@ -559,7 +559,7 @@ function assignDefaults(
     )
     if (isNaN(value) || value < 1) {
       throw new Error(
-        'Server Actions Size Limit must be a valid number or filesize format lager than 1MB: https://nextjs.org/docs/app/api-reference/functions/server-actions#size-limitation'
+        'Server Actions Size Limit must be a valid number or filesize format larger than 1MB: https://nextjs.org/docs/app/api-reference/functions/server-actions#size-limitation'
       )
     }
   }

test/e2e/app-dir/actions/app-action-size-limit-invalid.test.ts

@@ -2,7 +2,7 @@ import { createNextDescribe } from 'e2e-utils'
 import { check } from 'next-test-utils'
 
 const CONFIG_ERROR =
-  'Server Actions Size Limit must be a valid number or filesize format lager than 1MB'
+  'Server Actions Size Limit must be a valid number or filesize format larger than 1MB'
 
 createNextDescribe(
   'app-dir action size limit invalid config',