先说说 Next.js 配置文件到底长啥样

咱们先把根目录里那个next.config.js或者next.config.mjs敲出来。

其实它就是一个普通的 Node 模块，导出一个对象。

Ru果你玩儿 TypeScript，直接换成next.config.ts，配合@tsconfig/next就Neng有类型提示。

哈哈，hen多小伙伴一打开就想往里面塞一堆奇怪的东西，结果报错到飞起。

Zui基础的几项必备配置

reactStrictMode默认打开，帮你捕捉潜在问题。

s​wcMinify生产环境下自动压缩代码。

distDir想把构建产物放别的目录？改这里就行。

// next.config.js
module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  distDir: 'build',
}

环境变量怎么优雅地写进配置里

在.env.local, .env.production之类的文件里写键值对，然后在next.config.js里暴露给前端。

注意：不要把密钥直接写进代码里懂的dou懂。

module.exports = {
  env: {
    API_URL: process.env.API_URL,
    NEXT_PUBLIC_ANALYTICS_ID: process.env.NEXT_PUBLIC_ANALYTICS_ID,
  },
}

图片优化——让你的页面轻盈又不失清晰度

images.domains: 要加载外链图片，这里加域名。

formats: 默认支持 WebP，还Neng加 AVIF，省流量。

module.exports = {
  images: {
    domains: ,
    formats: ,
    deviceSizes: ,
  },
}

CORS 与自定义响应头——别让跨域坑了你

CORS 那玩意儿经常被忽视，一不小心请求被拦住。咱们Ke以在 config 里统一加 header。

module.exports = {
  async headers {
    return ,
      },
    ]
  },
}

重定向 & rewrite——站点迁移或多语言切换的好帮手

redirects: 永久或临时跳转，douNeng在这里写。

rewrites: 想让 URL kan起来geng友好，却不改变实际路径？这招管用。

module.exports = {
  async redirects {
    return 
  },
  async rewrites {
    return 
  },
}

Turbopack 与自定义 Webpack——高级玩儿法随你挑选

Turbopack Yi经是默认打包器了Ru果要透传 Webpack 配置，用{ webpack { … } }.

# 小提醒：别随便改 loader，否则编译会崩溃，害怕的话先备份一下再动手。

顺带聊聊“为什么百度不收录”这个老生常谈的问题吧~

A：hen多 Next.js 项目默认是 SSR 或者 SSG，但Ru果你开启了动态渲染且没有Zuo好 SSR 缓存，爬虫可Neng抓不到内容。说实话，这点经常被忽视。

B：还有一个坑是 robots.txt 写得太严，或者页面返回了 x‑robots‑tag:noindex, 百度自然会绕路不收录。咱就是说把这些禁忌删掉就Neng解决大半问题啦！哈哈。

bypass技巧——让百度kan到你的页面真面目

- 确保服务器返回完整的 HTML，而不是只返回空壳子；

- 给关键页面加上 ；

- 用 Next.js 的 ；

- Zui后检查一下 CDN 是否误拦了百度爬虫 IP。

Dive into devIndicators & generateEtags —— 小细节，大提升

devIndicators:

# 在开发模式下右下角会出现 Next.js 标记，你觉得吵的话Ke以关掉：

module.exports = {
  devIndicators: { buildActivityPosition: 'bottom-left' }, // 改颜色也行
}

generateEtags:

# ETag 用来判断资源是否变geng。Ru果你的网站频繁geng新但 CDN 不刷新，Ke以关掉它，让浏览器每次dou走新资源：

module.exports = {
  generateEtags:false,
}

Straight to production — 打包部署前必kan

# 想把站点导出成纯静态文件？把 output 设置成 export 就好啦：

module.exports = {
  output:'export',
  trailingSlash:true,
}

# 静态资源放 CDN？那 assetPrefix 必不可少：

module.exports = {
  assetPrefix:'https://cdn.my-site.com',
}

Sitemap & robots.txt 小技巧

# 自动生成 sitemap，用 next-sitemap 插件Zui省事。但记得在 next.config.js 把 basePath 带进去，不然路径会错位。

Epilogue —— 一句话配置信息该怎么玩儿

# 配置本身不是终点，而是帮助你把业务需求映射到框架Neng力上的桥梁。你懂的，只要保持灵活、多实验，你总Neng找到Zui合适自己的那套组合。哈哈，祝你玩得开心！

---