Next.js中如何拆分大型视图组件为小组件并避免其被外部请求访问？

非路由文件隐藏核心规则 #

Next.js 路由系统原生内置了文件过滤规则，符合以下命名规则的文件/文件夹不会被识别为路由节点，外部无法通过请求直接访问：

• 名称以 _ 开头的文件/文件夹：适配所有 Next.js 版本，同时兼容 Pages Router 和 App Router，是最通用的实现方案。你可以在对应路由页面的同级目录下新建 _components 文件夹存放拆分的子组件，新建 _styles 文件夹存放 styled-components 相关的样式定义即可。
• 带 (private) 前缀的文件夹：仅适配 Next.js 13.1+ 的 App Router，命名格式为 (private)/xxx，和下划线开头的规则效果完全一致，优势是可以和路由相关的公共文件夹做更清晰的区分。
• 根目录独立文件夹：你也可以直接在项目根目录新建全局的 components、styles 文件夹，按业务模块划分存放跨页面复用的组件和样式，完全不会和路由系统产生关联。

注意：以上规则都是 Next.js 原生支持的能力，不需要额外修改 next.config.js 配置，也不会影响你在业务代码中正常导入这些文件使用。

styled-components 样式文件存放推荐方案 #

针对 styled-components 的使用场景，推荐采用就近存放的目录结构，示例如下：

app/
  article/
    page.js // 正式路由页面，外部可通过 /article 访问
    _components/
      ArticleHeader.js // 拆分的子组件，不会被识别为路由
      ArticleContent.js // 拆分的子组件
      article.styled.js // 存放当前页面所有 styled 相关的样式定义

如果子组件拆分粒度较细，你也可以给每个子组件单独配套对应的样式文件，比如 ArticleHeader.styled.js，只要所有文件都放在 _ 开头的私有文件夹下，就不会被路由系统解析。

内容的提问来源于stack exchange，提问作者Sergey Filatov