在没有主布局的 Next.js 14 App Router 中配置 AWS Amplify.tsx

问题描述 投票:0回答:1

我的 Next.js 应用程序的结构如下:

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

我没有在 /app 级别包含主布局.tsx,因为我希望每个子路由(主页、仪表板、身份验证)都有自己的布局。

我想将 AWS Amplify 包含在我的应用程序中,并且需要放置此代码

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

在我的应用程序的入口点。

我不确定此设置中的位置,如何确保此代码在初始化时运行?

谢谢

amazon-web-services next.js aws-amplify next.js13 app-router
1个回答
0
投票

我实际上认为在应用程序目录中必须有一个布局,但 Next 可能现在为您创建一个虚拟布局...... 不管怎样,我仍然认为你应该在

RootLayout
中获取你的配置。比如:

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>
  )
}

实际上不会影响布局本身。

© www.soinside.com 2019 - 2024. All rights reserved.