Configuring AWS Amplify in Next.js 14 App Router with no main layout.tsx

27 Views Asked by Or Shemtov At 29 March 2024 at 14:41

My Next.js app is structured as follows:

app
├── (auth)
│   ├── layout.tsx
│   ├── login
│   │   └── page.tsx
│   └── signup
│       └── page.tsx
├── (dashboard)
│   ├── dashboard
│   │   └── page.tsx
│   └── layout.tsx
├── (home)
│   ├── about
│   │   └── page.tsx
│   ├── layout.tsx
│   ├── page.tsx
│   └── pricing
│       └── page.tsx
├── amplifyconfiguration.json
├── aws-exports.js
├── favicon.ico
└── globals.css

I don't include a main layout.tsx at the /app level because I want each sub-route (home, dashboard, auth) to have their own layout.

I want to include AWS Amplify in my app and it requires to put this code

import { Amplify } from 'aws-amplify';
import config from './amplifyconfiguration.json';
Amplify.configure(config);

At the entry point of my app.

I'm not sure where that would be in this setup, how can I make sure this code runs on initialization?

Thanks

Original Q&A

There are 1 best solutions below

grekier On 30 March 2024 at 19:12

I actually thought that it was mandatory to have a layout in the app directory but it might be that Next creates a dummy one for you now... Anyways, I still think you should get your configuration in the RootLayout. Something like:

import { Amplify } from 'aws-amplify';
import config from './amplifyconfiguration.json';
Amplify.configure(config);

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

wouldn't actually affect the layout itself.

Configuring AWS Amplify in Next.js 14 App Router with no main layout.tsx

There are 1 best solutions below

Related Questions in AMAZON-WEB-SERVICES

Related Questions in NEXT.JS

Related Questions in AWS-AMPLIFY

Related Questions in NEXT.JS13

Related Questions in APP-ROUTER

Trending Questions

Popular # Hahtags

Popular Questions