🗿 Static Files in Next.js
Mar 15, 2020
When building a Next.js project you often might want to host some static files along side the application code. Next makes this easy with the
To host static files in Next.js you should place those files in a directory named public at the root of the application. Next will then know to host those files statically starting from the root path.
Hosing static files with Next.js
Hosting static files is dead-easy in Next.js. You simply add the files you want to host at
public/fileand then it will be accessible at the route
/file. It is possible for these static files to conflict in name with routes in the
pagesdirectory, so you'll have to be somewhat careful not to collide the names, but being able to host static files from the root path is useful for things like hosting a favicon or
robots.txtwhich are expected to be at the webroot.
Generating static files at build time in Next.js
Now that Next.js supports some static site generation through
getStaticPropsyou can actually write new static files at build time. Simply write some node.js code using the
fsmodule to write new files into the
public/directory at build time and then you can reference them in your application. This is especially useful for things like pre-processing images.
Generally the flow will be:
- write some code that adds new files to the
public/directory at build time
- before you execute that code, ensure that
public/is cleaned out of any of the built assets to avoid collisions etc.
For more info on the API around hosting static files you can check out the Next.js docs.
Note that if you use the
assetPrefixconfiguration for Next it won't have any effect on how those assets are served. So you will have to prefix them yourself in the file path so that the CDN will know when to invalidate it's cache. Zeit's CDN does this automatically since it's aware of how Next.js projects are configured.