next项目app router 中layout命名规范
目前正在使用next15重构项目，记录一下我偏好的目录结构和命名规范
1、目录结构
src/├── app/ # App Router 主目录│ ├── layout.tsx # Root layout│ ├── page.tsx│ └── ...│├── components/ # 组件目录│ ├── layout/ # 布局相关组件│ │ ├── Header.tsx │ │ ├── Footer.tsx│ │ ├── Sidebar.tsx│ │ └── index.ts # 统一导出│ └── ...
在 layout.tsx 中使用这些组件的示例：
import { Header, Footer } from '@/components/layout'export default function RootLayout({children,
}: {children: React.ReactNode
}) {return (<html lang="en"><body><Header /><main>{children}</main><Footer /></body></html>)
}
2、建议：
1、将布局组件放在 components/layout 目录下，便于管理和维护
2、可以创建一个 index.ts 统一导出这些组件：
export { default as Header } from './Header'
export { default as Footer } from './Footer'
export { default as Sidebar } from './Sidebar'
- 如果布局组件比较复杂，可以在每个组件下创建子组件：
components/├── layout/│ ├── Header/│ │ ├── index.tsx│ │ ├── Logo.tsx│ │ └── Navigation.tsx│ ├── Footer/│ └── Sidebar/