Next routes make the static file serving doesn't work.

[muhghazaliakbar]

I have implemented the static file serving https://nextjs.org/docs#static-file-serving-eg-images on Next.js but seems doesn't work because my router configuration:

const routes = require('next-routes')

module.exports = routes().add('post', '/:categorySlug/:slug', 'post/post-show')

I think that's because next routes detect the image url <image src="/img/my-image.png" /> in public directory as post route 🤔

Anyone can help with this one? 😬

[dhacquebord]

Replacing:

// With express
const express = require('express')
app.prepare().then(() => {
  express().use(handler).listen(3000)
})

with:

// With express
const express = require('express')
app.prepare().then(() => {
  router.use(express.static('public'))
  express().use(handler).listen(3000)
})

in server.js seems to be a (temporary) solution.

[davemcnally]

Running into the same problem, trying to use some regex for pattern matching instead to see if I can exclude static files but that's not working either. Tried a couple delimiter options too, not sure on the correct format but I get Invalid group syntax errors.

.add({
    name: 'subpage',
    pattern: `^((?!images).)*$`,
    page: '/sub/[subpage]'
  });

[lizandroconde]

This worked for me!!

//Next
import next from "next";
import express from "express";
import { routes } from "./routes";
import { HTTPHandler } from "next-routes";
import { NextServer } from "next/dist/server/next";

//Asign the routes to nextJS
const port: number = parseInt(process.env.PORT!) || 8700;
const dev: boolean = process.env.NODE_ENV !== "production";
const app: NextServer = next({ dev });
const handler: HTTPHandler = routes.getRequestHandler(app);
 
const server = express();

//Init server with express
(async (): Promise<void> => {
  try {
    await app.prepare();
    server.use(express.static('public'));
    server.use(handler);
    server.listen(port, (err?: any): void => {
      
      if (err) throw err;
      console.log(`🚀 Server is running on: http://localhost:${port}`);
    })
      
      
  } catch (e) {
    console.error(e);
    process.exit(1);
  }
})();