next项目app router 中layout命名规范_next 文件命名规范-优快云博客

本文链接：https://blog.youkuaiyun.com/solocao/article/details/143458214

目前正在使用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/