NextJS服务器配置多公共资源文件夹问题求助

嘿，你的问题核心出在Express中间件的执行顺序上！

你当前的代码里，把express.static的配置放在了expressApp.all('*', ...)之后，但Express是严格按照中间件定义的顺序来处理请求的：那个all('*')会匹配所有进来的请求，直接交给Next.js的handle函数处理，后面的静态文件夹中间件根本没有机会被执行到。

修复方案 #

把第二个静态文件夹的express.static配置移到all('*')之前，这样当请求匹配到这个文件夹里的资源时，会优先被静态文件中间件处理；如果请求不是这个静态文件夹的资源，才会流转到Next.js的路由处理逻辑里。

修改后的完整代码如下：

const express = require('express');
const next = require('next');
const expressApp = express();
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare()
  .then(() => {
    // 先配置第二个静态文件夹，放在all('*')之前
    expressApp.use(express.static('/usr/local/somewhereelse/assets', {caseSensitive: true}));
    
    // 再让所有未匹配的请求交给Next.js处理
    expressApp.all('*', (req, res) => {
      return handle(req, res);
    });
    
    spdy.createServer(httpsOptions, expressApp)
      .listen(port, (err) => {
        if(err) {
          throw err;
        }
        console.log('Listening @:' + port);
      });
  });

额外优化建议 #

如果想避免这个额外的静态文件夹和Next.js默认的/public资源路径冲突，你可以给这个静态文件夹设置一个访问前缀，比如：

// 这样访问 /external-assets/xxx.png 时，会去 /usr/local/somewhereelse/assets/xxx.png 找资源
expressApp.use('/external-assets', express.static('/usr/local/somewhereelse/assets', {caseSensitive: true}));

这样能更清晰地区分不同来源的静态资源，也不会和Next.js默认的静态资源路由混淆。

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