🐶
Next.js

Using Next.js Public Folder: A Guide

By Filip on 10/05/2024

Learn how to effectively use the public folder in Next.js to serve static assets like images, fonts, and files, directly from the root directory, enhancing your website's performance and user experience.

Using Next.js Public Folder: A Guide

Table of Contents

Introduction

This guide will walk you through the process of serving static assets, such as images, fonts, and icons, using the public folder in Next.js. You'll learn how to structure your assets, access them within your components, and understand important considerations for managing static content effectively.

Step-by-Step Guide

Next.js offers a convenient way to manage static assets like images, fonts, and icons through its public folder. Let's explore how to effectively use this feature:

1. Setting Up the Public Folder:

  • Location: Ensure you have a public folder in the root directory of your Next.js project. If it doesn't exist, create one.
  • Organization: You can organize assets within the public folder using subfolders to maintain a clean structure. For example, you might have separate folders for images, fonts, and icons.

2. Placing Static Assets:

  • Directly in Public: Place any files you want to be directly accessible at the root of your website within the public folder. For instance, favicon.ico or robots.txt would go here.
  • Within Subfolders: Organize other assets like images, fonts, and icons within relevant subfolders. This helps maintain a structured approach.

3. Accessing Static Assets:

  • Direct URLs: Files within the public folder are served directly from the root of your website. You can access them using URLs like:
https://yourdomain.com/image.png
https://yourdomain.com/fonts/myfont.woff2
  • Image Component: When using images within your React components, you can import them directly using the path relative to the public folder:
import React from 'react';

function MyComponent() {
  return (
    <div>
      <img src="/images/logo.png" alt="My Logo" />
    </div>
  );
}

export default MyComponent;

4. Important Considerations:

  • No Processing: Files in the public folder are served as-is, without any processing by Next.js. This means you can't use Next.js features like image optimization or dynamic routing for these assets.
  • Caching: By default, Next.js sets cache headers for assets in the public folder. You can customize caching behavior using custom server configurations if needed.
  • Security: Be cautious about placing sensitive information within the public folder, as it's directly accessible to anyone visiting your website.

5. Alternatives for Dynamic Assets:

  • Dynamic Routes: If you need to dynamically generate URLs or process assets before serving them, consider using Next.js's dynamic routing capabilities.
  • API Routes: For more complex scenarios involving data fetching or server-side logic, you can utilize Next.js API routes to handle asset delivery.

By following these steps and understanding the considerations, you can effectively manage and serve static assets in your Next.js applications, ensuring optimal performance and user experience.

Code Example

This code demonstrates serving static assets (images, fonts) in a Next.js app using the 'public' folder. It guides through creating a Next.js project, structuring the 'public' folder, adding assets, creating a component to display them, and optionally adding a font-face declaration in CSS. The example showcases accessing the assets directly using their paths relative to the 'public' folder. Finally, it reminds that assets in 'public' are served without processing and suggests alternatives for dynamic content.

This example demonstrates how to use the public folder to serve an image and a custom font in a Next.js application:

1. Project Setup:

  • Create a new Next.js project:
npx create-next-app my-next-app
  • Navigate to the project directory:
cd my-next-app

2. Create the Public Folder Structure:

  • Inside the project's root directory, create a public folder.
  • Within the public folder, create two subfolders: images and fonts.

3. Add Assets:

  • Place your image (e.g., logo.png) inside the public/images folder.
  • Place your custom font files (e.g., myfont.woff2, myfont.woff) inside the public/fonts folder.

4. Create a Next.js Component:

  • Create a new file named MyComponent.js in the pages directory:
import React from 'react';

function MyComponent() {
  return (
    <div>
      {/* Display the image from the public/images folder */}
      <img src="/images/logo.png" alt="My Logo" />
      {/* Apply the custom font */}
      <p style={{ fontFamily: 'MyFont' }}>This text uses the custom font.</p>
    </div>
  );
}

export default MyComponent;

5. Add Font Face Declaration (Optional):

  • If you're using a custom font, you'll need to add a font-face declaration in your CSS. Create a styles folder in the root directory and add a global.css file:
/* styles/global.css */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
  • Import the CSS file in your pages/_app.js:
import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

6. Run the Application:

npm run dev

Now, when you visit http://localhost:3000, you should see your component displaying the image and the text styled with your custom font.

Remember:

  • Assets in the public folder are served as-is, without processing.
  • Use dynamic routing or API routes for dynamic assets or complex scenarios.

Additional Notes

  • Image Optimization: While Next.js doesn't directly optimize images in the public folder, you can still leverage external tools or libraries for optimization before placing them in the public folder. Consider using tools like next-optimized-images or imagemin to reduce image file sizes and improve loading times.
  • Customizing Cache Control: For more granular control over caching behavior, you can configure cache headers using a custom server or middleware. This allows you to set specific cache durations for different types of assets or implement more advanced caching strategies.
  • Environment-Specific Assets: If you need to serve different assets based on the environment (development, production, etc.), you can use environment variables to conditionally include or exclude assets from the public folder during the build process.
  • Dynamic Asset Loading: For situations where you need to load assets dynamically based on user interactions or data fetching, consider using libraries like next/dynamic or react-lazyload to optimize performance and avoid unnecessary asset downloads.
  • Content Delivery Networks (CDNs): To further improve asset delivery performance, especially for globally distributed audiences, consider using a CDN to serve assets from edge locations closer to your users.
  • Security Best Practices: Be mindful of the files you place in the public folder, as they are directly accessible. Avoid including sensitive information or files that could pose security risks.
  • Versioning Assets: To prevent issues with cached assets after updates, consider implementing a versioning strategy for your static assets. This can involve appending hashes to filenames or using content-based addressing.
  • Accessibility: Ensure that your static assets, especially images, are accessible by providing appropriate alternative text (alt text) and considering other accessibility guidelines.

Summary

Action Description Example
Folder Setup Create a public folder in your project's root directory. public/images, public/fonts
Asset Placement Place files directly in public or within subfolders for organization. public/favicon.ico, public/images/logo.png
Access Assets Use direct URLs or import within React components using relative paths. https://yourdomain.com/logo.png, import logo from '/logo.png'
Considerations Files are served as-is, caching is enabled, and be cautious of sensitive data.
Alternatives Use dynamic routes or API routes for dynamic asset handling.

Conclusion

In conclusion, Next.js provides a straightforward and efficient approach to managing static assets through its public folder. By understanding the key steps and considerations outlined in this guide, developers can effectively serve static content, optimize performance, and enhance the user experience of their Next.js applications. Whether you're working with images, fonts, icons, or other static files, the public folder offers a convenient solution for delivering these assets directly to your users. Remember to leverage additional techniques like image optimization, caching strategies, and content delivery networks to further enhance asset delivery and ensure optimal performance for your Next.js projects.

References

Were You Able to Follow the Instructions?

😍Love it!
😊Yes
😐Meh-gical
😞No
🤮Clickbait

Related posts

Next.js '@types/react' Not Found Issue

Troubleshooting guide for resolving the issue of Next.js not recognizing '@types/react' including potential causes and solutions.

react-i18next: Pass an i18next Instance

Learn how to configure react-i18next for seamless localization by passing an i18next instance using initReactI18next in your React applications.

NextJS Build Error: No Valid Build Found

Troubleshooting steps for the NextJS error "Cannot find a valid build in the '.next' directory", including potential causes and solutions to get your Next.js application up and running.