feat: Add nextjs 16 compatibility. (#6744)

* feat: next16 compatibility for examples

* fix: install liveness as bundled dependency

* feat: next16 compatibility for docs

* fix: license adjustment for dependencies

* tests: adjust tests

* Create sixty-bats-thank.md

Author: bobbor

.changeset/sixty-bats-thank.md

@@ -0,0 +1,7 @@
+---
+"@aws-amplify/ui-docs": patch
+"@aws-amplify/ui-next-app-router-example": patch
+"@aws-amplify/ui-next-pages-router-example": patch
+---
+
+feat: Add nextjs 16 compatibility.

.github/dependency-review/config.yml

@@ -35,3 +35,24 @@ allow-licenses:
   - 'zlib-acknowledgement'
   - 'Zlib'
   - 'LicenseRef-scancode-unicode'
+allow-dependencies-licenses:
+  # These packages are needed for nextjs (more detailed sharp)
+  # they are dynamic libraries and thus do not ship the underlying library
+  # which means they are not under LGPL strictly speaking.
+  # so an exception is valid here
+  # ALSO: none of these are shipped to the customer. they're only used for examples.
+  - 'pkg:npm/%2540img/sharp-libvips-darwin-arm64@1.2.4'
+  - 'pkg:npm/%2540img/sharp-libvips-darwin-x64@1.2.4'
+  - 'pkg:npm/%2540img/sharp-libvips-linux-arm@1.2.4'
+  - 'pkg:npm/%2540img/sharp-libvips-linux-arm64@1.2.4'
+  - 'pkg:npm/%2540img/sharp-libvips-linux-ppc64@1.2.4'
+  - 'pkg:npm/%2540img/sharp-libvips-linux-riscv64@1.2.4'
+  - 'pkg:npm/%2540img/sharp-libvips-linux-s390x@1.2.4'
+  - 'pkg:npm/%2540img/sharp-libvips-linux-x64@1.2.4'
+  - 'pkg:npm/%2540img/sharp-libvips-linuxmusl-arm64@1.2.4'
+  - 'pkg:npm/%2540img/sharp-libvips-linuxmusl-x64@1.2.4'
+  - 'pkg:npm/%2540img/sharp-wasm32'
+  - 'pkg:npm/%2540img/sharp-win32-arm64'
+  - 'pkg:npm/%2540img/sharp-win32-ia32'
+  - 'pkg:npm/%2540img/sharp-win32-x64'
+  - 'pkg:npm/unicode-match-property-value-ecmascript@2.2.1'

README.md

@@ -89,6 +89,7 @@ Amplify UI is an open-source UI library with cloud-connected components that are
 | VisuallyHidden   |    ✅     |
 
 ## Version Support
+
 AWS Amplify UI library (React, React Native, Angular, and Vue) that depends on AWS Amplify JavaScript library v4 and below will end support on **April 13, 2026**, as documented in our [AWS Amplify UI libraries version support calendar](https://github.com/aws-amplify/amplify-ui/issues/6712).
 
 Effective immediately, the AWS Amplify UI library that depends on AWS Amplify JavaScript library v4 and below will enter **Maintenance Mode** until April 13, 2026 after which it will receive no more updates. While in Maintenance Mode, the libraries will only receive updates for **critical bug fixes and security vulnerabilities**. Refer to [Amplify Documentation](https://docs.amplify.aws/reference/maintenance-policy) for more information on the maintenance policy.
@@ -119,3 +120,11 @@ As we continue to work on the new Amplify UI we will move UI-related issues in t
 ## We love contributors!!
 
 See our contributing guide [CONTRIBUTING.md](/CONTRIBUTING.md) to help us scale Amplify UI!
+
+---
+
+## License Note
+
+Although this repository is released and licensed under the Apache License (see [LICENSE](./LICENSE)), devDependencies of some packages (namely: [docs](./docs), the [next-example](./examples/next) as well as the [next-app-router example](./examples/next-app-router)) transitively use the third party [sharp](https://sharp.pixelplumbing.com/) project through NEXT.js
+
+The sharp projects prebuilt binaries' licensing includes [LGPL-2.1](https://opensource.org/license/LGPL-2.1) and [LGPL-3.0-or-later](https://opensource.org/license/LGPL-3.0) licenses

build-system-tests/e2e/cypress/integration/common/shared.ts

@@ -29,18 +29,21 @@ Given(
 When('I click the {string} tab', (label: string) => {
   cy.findByRole('tab', {
     name: new RegExp(`^${escapeRegExp(label)}$`, 'i'),
+    timeout: 5000,
   }).click();
 });
 
 When('I click the {string} button', (name: string) => {
   cy.findByRole('button', {
     name: new RegExp(`^${escapeRegExp(name)}$`, 'i'),
+    timeout: 5000,
   }).click();
 });
 
 Then('I see the {string} button', (name: string) => {
   cy.findByRole('button', {
     name: new RegExp(`^${escapeRegExp(name)}$`, 'i'),
+    timeout: 5000,
   }).should('be.visible');
 });
 

docs/next-env.d.ts

@@ -10,7 +10,7 @@
     "flutter:clean": "rm -rf public/flutter/authenticator",
     "flutter:copy": "cp -r ./flutter/authenticator/build/web public/flutter/authenticator",
     "prebuild": "yarn build:cssvars-table && yarn build:props-tables",
-    "build": "NODE_OPTIONS=\"--max-old-space-size=4096\" next build",
+    "build": "NODE_OPTIONS=\"--max-old-space-size=4096\" next build --webpack",
     "build:cssvars-table": "node --require esbuild-register ./scripts/generate-cssvars-table-data.ts",
     "build:props-tables": "node --require esbuild-register ./scripts/generate-props-tables-data.ts",
     "clean": "rimraf node_modules .next && yarn flutter:clean",
@@ -35,8 +35,8 @@
     "gray-matter": "^4.0.3",
     "lodash": "^4.17.21",
     "mdx-prism": "^0.3.3",
-    "next": "^14.2.35",
-    "next-plugin-preval": "^1.2.1",
+    "next": "^16.0.0",
+    "next-plugin-preval": "^1.2.8",
     "prism-react-renderer": "1.2.1",
     "raw-loader": "^4.0.2",
     "react": "^18.3.0",

docs/package.json

@@ -2,12 +2,24 @@
   "compilerOptions": {
     "baseUrl": ".",
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "paths": {
-      "@/components/*": ["src/components/*"],
-      "@/data/*": ["src/data/*"],
-      "@/utils/*": ["src/utils/*"],
-      "aws-amplify/storage": ["storageMock.ts"]
+      "@/components/*": [
+        "src/components/*"
+      ],
+      "@/data/*": [
+        "src/data/*"
+      ],
+      "@/utils/*": [
+        "src/utils/*"
+      ],
+      "aws-amplify/storage": [
+        "storageMock.ts"
+      ]
     },
     "allowJs": true,
     "skipLibCheck": true,
@@ -20,11 +32,17 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "downlevelIteration": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
   "ts-node": {
     "compilerOptions": {
       "module": "CommonJS"

docs/tsconfig.json

@@ -12,7 +12,7 @@
     "@aws-amplify/ui-react": "6.13.2",
     "@aws-amplify/ui-react-storage": "3.14.0",
     "react": "^18.3.0",
-    "next": "^14.2.35",
+    "next": "^16.0.0",
     "react-dom": "^18",
     "react-icons": "^4.3.1"
   },

examples/next-app-router/package.json

@@ -6,8 +6,12 @@ import { Header } from '@/components/Header';
 import ThemeToggle from '@/components/ThemeToggle';
 import { cookies } from 'next/headers';
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  const cookieStore = cookies();
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const cookieStore = await cookies();
   const colorMode = (cookieStore.get('colorMode')?.value ??
     'dark') as ColorMode;