I am using Next.js 14.0.2 with the app router and I want to render the root layout.tsx on the server side. I am also using AWS Amplify's ThemeProvider and Authenticator component, which are client components according to my research. Therefore, I am not allowed to use them in the root layout (SSR).
Wrapping these components in a separate component like described in the Next.js documentation also didn't help. https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-third-party-packages-and-providers
This is my layout.tsx:
import type { Metadata } from "next"
import { Inter } from"next/font/google"
import "../styles/globals.css"
import '@aws-amplify/ui-react/styles.css';
import React from "react";
import Providers from "@/app/Providers";
import {Amplify} from 'aws-amplify';
import awsExports from '../aws-exports';
const existingGraphQLConfig = {
aws_appsync_graphqlEndpoint: "xxx",
aws_appsync_region: "xxx",
aws_appsync_authenticationType: "API_KEY",
aws_appsync_apiKey: "xxx",
};
Amplify.configure(awsExports);
Amplify.configure(existingGraphQLConfig);
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: "Title",
description: "This is the description",
}
export default function RootLayout({children}: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>
<Providers>{children}</Providers>
</body>
</html>
);
}
This is my Providers.tsx:
"use client"
import {Authenticator, ThemeProvider} from "@aws-amplify/ui-react";
import { studioTheme } from "../ui-components";
import React from "react";
export default function Providers({children}: { children: React.ReactNode }) {
return (
<ThemeProvider theme={studioTheme}>
<Authenticator.Provider>{children}</Authenticator.Provider>
</ThemeProvider>
);
}
In the browser console, I get this error:
[ERROR] 37:00.913 AuthError -
Error: Amplify has not been configured correctly.
The configuration object is missing required auth properties.
This error is typically caused by one of the following scenarios:
1. Did you run `amplify push` after adding auth via `amplify add auth`?
See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information
2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.
Any help regarding this problem would be much appreciated!