第四章：Next.js 基础

静态文件和样式

静态文件处理

在 Next.js 中，静态文件（如图片、字体、PDF 等）默认存放在 public 目录下。这些文件可以通过根路径 / 直接访问。例如：

  • 文件路径：public/images/logo.png
  • 访问方式：/images/logo.png

最佳实践：

  1. 组织静态文件：建议按类型分类存放（如 /images、/fonts）。
  2. 缓存优化：通过文件名哈希或 CDN 加速静态资源加载。
  3. 避免命名冲突：不要将文件命名为 favicon.ico 或 robots.txt 以外的其他保留名称。

样式管理

Next.js 支持多种样式方案，包括：

1. 全局 CSS

  • 在 pages/_app.js 中导入全局 CSS 文件（如 styles/globals.css）。
  • 适用于基础样式或第三方库的全局样式覆盖。
// pages/_app.js
import '../styles/globals.css';

2. CSS Modules

  • 默认支持以 .module.css 结尾的 CSS Modules。
  • 类名会被自动哈希化，避免命名冲突。
// components/Button.module.css
.error { color: red; }

// components/Button.js
import styles from './Button.module.css';
export default function Button() {
  return <button className={styles.error}>Click</button>;
}

3. Sass/SCSS 支持

  • 通过 sass 依赖扩展支持。
  • 安装：npm install sass
// styles/variables.module.scss
$primary-color: #0070f3;

// components/Header.module.scss
@use 'variables' as v;
.header { color: v.$primary-color; }

4. CSS-in-JS

  • 支持流行库如 styled-components 或 emotion。
  • 需额外配置 next.config.js（以 styled-components 为例）：
// next.config.js
module.exports = {
  compiler: {
    styledComponents: true,
  },
};

示例：静态图片和样式组合

import styles from './Hero.module.css';

export default function Hero() {
  return (
    <div className={styles.container}>
      <img src="/images/hero-bg.png" alt="Background" />
      <h1 className={styles.title}>Welcome to Next.js!</h1>
    </div>
  );
}

/* Hero.module.css */
.container {
  position: relative;
  text-align: center;
}

.title {
  font-size: 2rem;
  color: var(--primary-color);
}

关键注意事项

  1. 性能优化：使用 next/image 组件优化图片加载。
  2. 样式作用域：优先使用 CSS Modules 避免全局污染。
  3. 生产构建：运行 next build 时会自动压缩 CSS 文件。
Last Updated::