Nextjs Public Folder Best Practices for Improved Performance

Using the public folder in Next.js can be a game-changer for your application's performance. It's a special directory where you can store static assets that don't need server-side rendering.

By placing static assets in the public folder, you can avoid unnecessary server requests and improve page load times. This is especially important for large media files or third-party libraries.

The public folder is also a great place to store static HTML files, which can be used to pre-render pages and improve SEO.

The public folder in Next.js 14 is a dedicated hub for static assets, automatically mapped to the root URL (/) for seamless access.

Organizing your assets in a logical and clear manner is crucial for maintainability. Separate your files into subdirectories that reflect their use or page association, such as icons in public/icons and shared images in public/images.

A clear and organized public folder makes it easier for developers to find and manage assets across large projects. This benefits modularity and reusability, as assets are compartmentalized for potential use across different components or pages.

The public/avatars folder is a great example of referencing user avatars. The Next.js Image component also optimizes and serves resized images for different device widths and resolutions, reducing bandwidth usage and improving page loads.

Manual optimization of static assets before deployment is a crucial step, as they are served as-is without a build step. Failing to compress or properly format image files can lead to suboptimal performance.

Importing assets from the node_modules directory or remote URLs into the public folder can bloat your project with duplicated assets. Instead, import them directly where they are needed to keep the public folder lean and your application optimized.

Customizing the Next.js build process is a crucial step when working with the Next.js framework. To do this, you need to edit the next.config.js file and add the line `output: 'standalone'`.

This line makes Next.js bundle all the files it needs into a single folder, along with a server.js file to run your app. The documentation has more information on this.

If your project uses Image Optimization with the default loader, you'll need to install sharp as a dependency. This is a necessary step to ensure everything works smoothly.

Running `npm run build` will create a folder called 'standalone' in the ./next directory. This is where all the bundled files will be stored.

Next.js assumes you'll manually control your 'static' and 'public' folder, as they might be deployed on a CDN. Since you're serving all the files from your Plesk domain, you'll need to move these two folders into the standalone folder.

To automate this process, you can add two new scripts, 'copy' and 'cleanup', to your package.json file. The 'copy' script moves the static folder, while the 'cleanup' script removes the large node_modules folder, which is no longer needed since Next.js is bundling all the dependencies into the standalone folder.

The public folder is where you store static assets in a Next.js project. This is the simplest approach, and it's the one I went with.

You can refer to assets as if they were located in the same directory as the markdown file. For example, if you have an image in the public folder, you can still use `src="image.jpg"` in your markdown file.

To achieve this, you can create a custom plugin in your MDX/Markdown pipeline using remark. This plugin rewrites the src attribute of all images to point to the public directory.

If you're using MDX in Next.js, you likely already have remark in your pipeline. To use this plugin, add it to the remarkPlugins list in your MDX build pipeline.

Here are a few other approaches you might consider:

In complex Next.js applications, naming collisions can occur between static assets and dynamic routes, making it essential to ensure unique asset names.

Developers should prefix or use unique identifiers within asset names to separate static assets from page routes, preventing conflicts.

Improper cache configuration can lead to stale content, so it's crucial to balance browser cache efficiency with content freshness.

Assets intended to be updated frequently should have a strategy to invalidate cache, such as versioning file names or setting a lower max-age.

Developers should incorporate assets into build processes that append hashes to asset filenames, ensuring that any changes force the browser to fetch the latest version.

The public dir is a great place to store assets for your blog. It's the simplest approach to use, and it's what I went with.

To use the public dir, you can create a custom plugin in your MDX/Markdown pipeline using remark. This plugin rewrites the src attribute of all images (and videos) to point to the public directory.

You can add the plugin to the remarkPlugins list of your MDX build pipeline. This is where you configure your MDX build process, and it's usually in a file like next.config.js or contentlayer.config.js.

If you're using MDX in Next.js, your MDX pipeline already uses remark, so you're good to go. Just add the plugin to the list and you're done.

Another option is to store your assets in the blog post directory and create a remark/rehype plugin to handle source redirection. This plugin would also copy the assets into the public directory during the build process. You can optimize this process by generating and comparing checksums of the source and destination assets.

You can also keep your assets in the blog post directory and generate symlinks to the public directory. However, be aware that Webpack and Next.js don't handle symlinks well, so you might need to patch Next.js to check for symlinks.