Next.js页面是否可导入CSS？目录结构及组件存放规范咨询

1. 页面中能否且应当导入CSS？ #

• 完全可以：Next.js 支持在pages目录下的页面文件中直接导入CSS，不管是CSS Modules还是符合规则的全局样式都没问题。
• 是否应当？分情况判断：
  • 如果你用的是CSS Modules（比如示例里的index.module.css），非常推荐这么做——CSS Modules自带局部作用域，不会污染全局样式，页面专属样式和页面文件放在一起，关联关系清晰，维护起来更方便。
  • 如果是全局CSS，Next.js要求只能在_app.js（或_app.tsx）中导入，这是为了避免样式重复加载和全局污染，所以页面里不要直接导入全局CSS文件。

2. 你的目录结构是否合规？标准实践是什么？ #

你给出的目录结构：

/pages
    /home
        index.js
        index.module.css
    /cart
        index.js
        index.module.css

• 完全合规：这种把页面专属的组件文件和样式文件放在同目录下的方式，是Next.js社区里很常见的实践之一，好处是关联文件就近存放，查找和修改都更高效。
• 其他常见标准实践：
  • 另一种主流做法是把所有CSS文件统一放在项目根目录的styles文件夹下，比如styles/Home.module.css、styles/Cart.module.css，再在对应页面中导入。这种方式适合习惯按文件类型归类的团队。
  • 没有绝对的“最优结构”，核心是团队内部统一规范，保持代码结构的一致性即可。

3. 是否需要把页面中所有带样式的元素移到components文件夹？ #

• 不需要强制这么做：
  • 如果只是页面内仅当前页面使用的小型元素（比如首页的专属横幅、购物车的结算按钮），直接写在页面文件里，或者和页面放在同目录下的独立小组件中就行，没必要硬塞到components目录。
  • 只有当某个元素需要在多个页面复用，或者逻辑、样式足够复杂，拆分后更易维护时，才适合移到components目录下。
• 总结：组件拆分的核心是复用性和可维护性，不是为了拆分而拆分。

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