feat: Add nextjs 16 compatibility.

.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

@@ -34,3 +34,24 @@ allow-licenses:
   - 'X11'
   - 'zlib-acknowledgement'
   - 'Zlib'
+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'

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/package.json

@@ -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.31",
-    "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/tsconfig.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"

examples/next-app-router/package.json

@@ -12,7 +12,7 @@
     "@aws-amplify/ui-react": "6.13.1",
     "@aws-amplify/ui-react-storage": "3.13.1",
     "react": "^18.3.0",
-    "next": "^14.2.31",
+    "next": "^16.0.0",
     "react-dom": "^18",
     "react-icons": "^4.3.1"
   },

examples/next-app-router/src/app/theme-switcher/layout.tsx

@@ -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;
 

examples/next/next.config.js

@@ -1,17 +1,17 @@
-const { patchWebpackConfig } = require('next-global-css');
-
-module.exports = {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
   reactStrictMode: true,
   /**
    * Setting trailingSlash to true to resolve known bug with federated sign in redirect + next.js
    * https://github.com/aws-amplify/amplify-cli/issues/7359#issuecomment-812821315
    */
   trailingSlash: true,
+  transpilePackages: [
+    '@mediapipe/face_detection',
+    '@tensorflow-models/face-detection',
+    '@aws-amplify/ui-react-liveness',
+  ],
   pageExtensions: ['page.tsx'],
-  webpack: (config, options) => {
-    // allows importing of css files inside modules
-    patchWebpackConfig(config, options);
-
-    return config;
-  },
 };
+
+module.exports = nextConfig;

examples/next/package.json

@@ -17,8 +17,8 @@
     "@aws-amplify/ui-react-notifications": "^2.2.13",
     "@aws-amplify/ui-react-storage": "^3.13.1",
     "@aws-sdk/credential-providers": "^3.370.0",
-    "next": "^14.2.31",
-    "next-global-css": "^1.1.1",
+    "next": "~16.0.0",
+    "next-global-css": "^1.3.1",
     "react": "^18.3.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.0",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@types/node": "^15.12.4",
     "eslint": "^8.44.0",
-    "eslint-config-next": "^13.5.5",
+    "eslint-config-next": "^16.0.0",
     "rimraf": "^5.0.0"
   }
 }

examples/next/pages/_app.page.tsx

@@ -8,6 +8,10 @@ import { Hub } from 'aws-amplify/utils';
 import { ThemeProvider } from '@aws-amplify/ui-react';
 import { useEffect } from 'react';
 import { MapProvider, useMap } from 'react-map-gl';
+import '@aws-amplify/ui-react/styles.css';
+import '@aws-amplify/ui-react-storage/styles.css';
+import '@aws-amplify/ui-react-geo/styles.css';
+import '@aws-amplify/ui-react-liveness/styles.css';
 
 if (typeof window !== 'undefined') {
   window['Amplify'] = Amplify;

examples/next/pages/examples/listings/App.tsx

@@ -1,24 +1,23 @@
 import * as React from 'react';
 import {
+  ColorMode,
+  ThemeProvider,
   ToggleButton,
   ToggleButtonGroup,
-  ThemeProvider,
-  ColorMode,
 } from '@aws-amplify/ui-react';
-import { MdWbSunny, MdBedtime, MdTonality } from 'react-icons/md';
+import { MdBedtime, MdTonality, MdWbSunny } from 'react-icons/md';
 
 import { theme } from '../../../theme';
 import { Logo } from './Logo';
-import '@aws-amplify/ui-react/styles.css';
-import './styles.scss';
+import './styles.module.scss';
 
 export const App = ({ children }) => {
   const [colorMode, setColorMode] = React.useState<ColorMode>('system');
   return (
     <ThemeProvider theme={theme} colorMode={colorMode}>
       <header className="listing-app-header">
         <Logo />
-        <input type="search" placeholder="search" />
+        <input type="search" placeholder="search" className="search-input" />
         <ToggleButtonGroup
           value={colorMode}
           isExclusive

examples/next/pages/examples/listings/styles.scss → examples/next/pages/examples/listings/styles.module.scss

@@ -70,14 +70,14 @@ h6.amplify-heading {
 .experience-card {
   position: relative;
   transition: all var(--amplify-time-medium);
-  
+
   & img {
     display: block;
   }
-  
+
   &:hover {
     transform: scale(1.05);
-    
+
     & > .experience-card-text {
       transform: scale(1.1);
     }
@@ -108,15 +108,15 @@ h6.amplify-heading {
   padding-right: var(--amplify-space-xxs);
 }
 
-input[type='search'] {
+.search-input {
   border-radius: 5rem;
   border-color: var(--amplify-colors-border-tertiary);
   border-width: 1px;
   border-style: solid;
   padding: var(--amplify-space-small) var(--amplify-space-large);
   width: 30rem;
   background-color: var(--amplify-colors-background-primary);
-  
+
   &:focus {
     outline: none;
     border-color: var(--amplify-colors-primary-60);

examples/next/pages/ui/components/accordion.page.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import {
-  Button,
   Accordion,
+  Button,
+  Divider,
   Flex,
   Heading,
-  Divider,
   Text,
+  TextField,
 } from '@aws-amplify/ui-react';
-import '@aws-amplify/ui-react/styles.css';
-import { TextField } from '@aws-amplify/ui-react';
 
 const accordions = [
   {

examples/next/pages/ui/components/account-settings/change-password-with-overrides/index.page.tsx

@@ -3,16 +3,16 @@ import React from 'react';
 import { Amplify } from 'aws-amplify';
 
 import {
+  AccountSettings,
   Button,
   Card,
   Flex,
   Heading,
-  AccountSettings,
   withAuthenticator,
 } from '@aws-amplify/ui-react';
-import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
+
 Amplify.configure(awsExports);
 
 const components = {

examples/next/pages/ui/components/account-settings/change-password/index.page.tsx

@@ -3,17 +3,17 @@ import React from 'react';
 import { Amplify } from 'aws-amplify';
 
 import {
+  AccountSettings,
   Alert,
   Button,
   Card,
   Flex,
   Heading,
-  AccountSettings,
   withAuthenticator,
 } from '@aws-amplify/ui-react';
-import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
+
 Amplify.configure(awsExports);
 
 function App({ signOut }) {

examples/next/pages/ui/components/account-settings/delete-user-display-text/index.page.tsx

@@ -1,15 +1,15 @@
 import { Amplify } from 'aws-amplify';
 
 import {
+  AccountSettings,
   Authenticator,
   Button,
   Card,
   Flex,
-  AccountSettings,
 } from '@aws-amplify/ui-react';
-import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
+
 Amplify.configure(awsExports);
 
 export default function App() {

examples/next/pages/ui/components/account-settings/delete-user-with-overrides/index.page.tsx

@@ -3,18 +3,18 @@ import { Amplify } from 'aws-amplify';
 import { signOut } from 'aws-amplify/auth';
 
 import {
+  AccountSettings,
   Button,
   Card,
   Flex,
   Heading,
-  AccountSettings,
   Text,
   TextField,
-  withAuthenticator, // IGNORE
+  withAuthenticator,
 } from '@aws-amplify/ui-react';
-import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from './aws-exports';
+
 Amplify.configure(awsExports);
 
 const handleSignOut = () => {