时间戳

首页 > 解决方案 > 有没有办法从 index.tsx 的同一目录将组件导入 index.tsx

next.js - 有没有办法从 index.tsx 的同一目录将组件导入 index.tsx

问题描述

是否可以import从页面目录中反应组件？我可以import从外面成功/pages/[...]/。 /components/[...]/例如，工作得很好。这对于可重复使用的组件来说很酷。

但是，如果我想将单个页面的组件拆分为单独的文件，如下所示：

/components
- SomeReusableComponent.tsx
/pages/[...]/
- index.tsx
- SomePageComponent.tsx

并将import其放入我的主要组件中：

// /pages/[...]/index.tsx
import SomeReusableComp from '../components/SomeReusableComponent'
import SomePageComp from './SomePageComponent'

export default function MyPage(){
// page code
}

我的构建失败：Build optimization failed: found pages without a React Component as default export in pages/

有什么诀窍吗？一些设置或者告诉 nextjs 这个文件是一个依赖而不是一个页面？

标签： next.js

解决方案

不，不幸的是，这是不可能的。Next.js 项目目录中的所有文件都pages必须是入口点（随后会变成路由），并且不能从项目中的任何其他文件导入。接下来“收集”所有这些文件pages并以特殊方式处理它们，因此目前无法避免这种情况。

通常对于我想在 multiple 中使用的可重用部分pages，我创建一个接受children作为道具的组件。

例如：

components/layout.js

export default function Layout({children}) {
  return (
    <div className="some-styling-for-pages">
      {children}
    </div>
  )
}

pages/index.js

import Layout from '../components/layout'

export default function IndexPage() {
  return <Layout>my page content</Layout>
}

推荐阅读