feat: Add nextjs 16 compatibility.

Author: bobbor

docs/package.json

@@ -35,7 +35,7 @@
     "gray-matter": "^4.0.3",
     "lodash": "^4.17.21",
     "mdx-prism": "^0.3.3",
-    "next": "^14.2.31",
+    "next": "^16.0.0",
     "next-plugin-preval": "^1.2.1",
     "prism-react-renderer": "1.2.1",
     "raw-loader": "^4.0.2",

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/next-env.d.ts

@@ -1,17 +1,20 @@
-const { patchWebpackConfig } = require('next-global-css');
+const { withGlobalCss } = require('next-global-css');
 
-module.exports = {
+const withConfig = withGlobalCss();
+/** @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/next.config.js

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

@@ -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/_app.page.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/App.tsx

@@ -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/examples/listings/styles.scss renamed to examples/next/pages/examples/listings/styles.module.scss

@@ -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/accordion.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 = {