Next.js脚手架中serve-favicon无法加载图标，求问其Express实现差异

Hey there! Let's break down why your serve-favicon middleware isn't working as expected with Next.js + Express, and what makes Next.js's Express integration unique.

1. Next.js Takes Priority in Request Handling #

The biggest gotcha here is middleware order. Next.js's request handler acts as a "catch-all" for most routes when you use expressApp.get('*', handle). If you've placed your serve-favicon middleware after this catch-all, it will never run—Next.js will try to resolve /favicon.ico as a page route (which doesn't exist) and return a 404 instead.

Fix this by moving the favicon middleware before Next.js's request handler:

const express = require('express');
const next = require('next');
const favicon = require('serve-favicon');
const path = require('path');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const expressApp = express();

  // ✅ Place favicon middleware FIRST
  expressApp.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

  // Next.js catch-all comes after
  expressApp.get('*', (req, res) => {
    return handle(req, res);
  });

  expressApp.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

2. Next.js Has Built-in Static Asset Handling #

You don't even need serve-favicon with Next.js! It has a dedicated public directory for static assets—any file placed here is served at the root URL automatically. This is the recommended approach because Next.js handles caching and routing for these assets out of the box.

Here's how to do it the Next.js way:

1. Drop your favicon.ico file directly into the public/ folder of your project.
2. Add a link tag to your root component (usually pages/_app.js or pages/_document.js):

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <link rel="icon" href="/favicon.ico" />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

3. Next.js's Custom Server Limitations #

When you use a custom Express server with Next.js, Next.js still retains control over its core routing system (pages, API routes, static assets). Express middleware only runs for requests that Next.js doesn't explicitly handle, or if you place the middleware before Next.js's catch-all handler. This is different from a pure Express app, where you have full control over every request's flow.

In short: If your middleware is running after Next.js's handler, it's effectively ignored for most routes—including /favicon.ico.

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