如何禁用Next静态文件服务 无需重命名/public目录即可用nginx提供资源

方案1：通过next.config.js配置按环境禁用（推荐，适用于Next.js 12+） #

Next.js官方提供了配置项可以直接关闭public目录的静态文件服务，你可以结合环境变量实现仅本地开发环境开启：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 仅本地开发环境开启public目录服务，预发/生产环境关闭
  disablePublicFolder: process.env.NODE_ENV !== 'development',
  // Next.js 13.1以下版本需要放到experimental配置块下：
  // experimental: {
  //   disablePublicFolder: process.env.NODE_ENV !== 'development',
  // }
}

module.exports = nextConfig

该方案不需要修改目录结构，也没有额外的运行时开销，完全匹配你的需求。

方案2：自定义中间件拦截请求（兼容旧版本Next.js） #

如果你的Next.js版本不支持上述配置，可以在根目录新增middleware.ts（或.js）实现静态资源请求的环境判断拦截：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // 非开发环境拦截静态资源请求，返回404或者按需求重定向
  if (process.env.NODE_ENV !== 'development' && request.nextUrl.pathname.match(/\.(js|css|png|jpg|svg|ico|woff2?)$/)) {
    return NextResponse.error()
  }
  return NextResponse.next()
}

你可以根据自己项目用到的静态资源后缀调整匹配规则，灵活度更高。

配套Nginx配置参考 #

线上环境需要在Nginx中添加静态资源匹配规则，直接指向部署包的public目录，示例配置如下：

server {
  listen 80;
  server_name your-domain.com;

  # 静态资源直接由Nginx响应
  location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot|mp4|webm)$ {
    root /path/to/your/deploy/project/public;
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # 动态请求转发到Next.js服务
  location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

注意：如果你使用了Next.js内置的Image组件引用public目录下的图片，关闭public目录服务后需要调整Image组件的src前缀，匹配Nginx的静态资源路径规则。

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