nest-next icon indicating copy to clipboard operation
nest-next copied to clipboard

Question: How to bypass /static path to next.js?

Open Xilel opened this issue 4 years ago • 6 comments

Let's say, you want to get some static files to be load on pages (like img) with next.js (https://nextjs.org/docs/basic-features/static-file-serving). Right now all links to /static path will be captured with nest.js. You can use @nestjs/serve-static but it is unpleasant to use. Is were are some way to pass this matter to nest-next? Nest-next version: 9.1.5 Next version: 9.3.3 Nest: 7.0.9

Xilel avatar May 24 '20 10:05 Xilel

Ok, after read render.filter.ts i understand what any request not handled by nest controllers go to next. So i order to provide static file you need to create directory static in next project root. Example: изображение However, public folder did not work for me. What is strange, Next.js supporting it from 9.1 version. So i think we need to do 2 thinks:

  1. Check how pass static file through /public directory, not the /static directory. We need this because /static directory is deprecated. (https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md)
  2. Write guide in README.md how to handle static file and add pages that access static files in examples.

Xilel avatar May 24 '20 18:05 Xilel

This was recently brought up in #47.

One of the main problems is how Nextjs handles the public files. Let's say that you have a fresh nextjs install without any nest integrations and you have your logo saved to /public/images/logo.png. If you try to access that file with that path it will 404, but if you try to access it at /images/logo.png next will correctly resolve the path.

So this brings up the question of how do we know what requests are for a static files since we can't just check if the req starts with public. From what I can tell, when next's server is generating all of the routes, it generates a list of all the public routes too. I am not sure if we should just take their lead, and generate a list of all the routes for public assets, but I am open to suggestions.

kyle-mccarthy avatar May 26 '20 22:05 kyle-mccarthy

@Xilel I just added a new config option, see this comment for some info on how to get the public directory working

kyle-mccarthy avatar Jun 23 '20 02:06 kyle-mccarthy

why dont you just add a static serving module in NestJS lol

stevefan1999-personal avatar Feb 16 '21 00:02 stevefan1999-personal

@stevefan1999-personal That should work fine as long as you want to have Nest serve the static content rather than Next. Next allows for serving static content from the public folder but then performs a "rewrite" on the URL. So if you have an asset such as public/my-image.png, it can be accessed from /my-image.png.

kyle-mccarthy avatar Feb 16 '21 00:02 kyle-mccarthy

@kyle-mccarthy well but it sort of works. Hell, I was even able to get next/image to work with this too. So I take that as a practical workaround, still the better solution is what you proposed (if I got right of your idea), when you hit 404 in Next, and try to see if the URL is starting in one of the public/static folders and redirect whenever possible.

stevefan1999-personal avatar Feb 16 '21 01:02 stevefan1999-personal