How to Access Files Uploaded to hte Public Folder in Next.js?

To access files uploaded to the public folder in Next.js, a popular React framework for building server-side rendered applications. When working with Next.js, it's important to understand how to manage files that are publicly accessible to your application users.

What is a Public Folder in Next.js?

The public folder in a Next.js project is a repository for static assets accessible directly by the client. Files stored in this folder are served as it is, without undergoing any processing by Webpack or other bundlers. This makes it an ideal location for storing images, fonts, and other resources that do not require dynamic handling.

Steps to access files uploaded to the public folder in Next.js

Step 1: Create a next js app using the command.

npx create-next-app myapp

Step 2: Navigate to the directory.

cd myapp

Project Structure:

Updated Dependencies:

{
  "name": "myapp",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^13.0.0",
    "node": "^18.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "postcss": "^8.0.0",
    "tailwindcss": "^3.0.0"
  }
}

Approach

• This approach involves placing your files directly into the public folder within your Next.js project.
• Once the files are in the public folder, you can directly assess it using simple url mentioned below because Next.js serves public folder as static.

Example: In this example we will access an image stored in public folder in Next.js by using direct url of the file. We have imported "Image" component from "next/Image" and used it to render the image.

/* global.css */

body {
    margin: 0;
    font-family: system-ui, -apple-system,
        BlinkMacSystemFont, 'Segoe UI',
        Roboto, Oxygen, Ubuntu, Cantarell,
        'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #ffff;
}

h2 {
    margin-top: 30px;
    color: green;
    display: grid;
    text-align: center;
    font-size: 45px;
    font-weight: bold;
}

h3 {
    margin-top: 25px;
    color: #22243b;
    display: grid;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
}

img {
    display: block;
    margin: 0 auto;
    outline: 2px solid #000;

}

// page.js

const Home = () => {

    return (
        <div>
            <h2 style={{ color: "green" }}>
                Geeksforgeeks
            </h2>
            <div style={{ margin: "40px 0" }}></div>
            <h3> Access file uploaded to public folder <br />
                in Next.js by direct URL
                <br /><br />Image</h3>

            <Image
                src={'/image.png'}
                alt="Direct Image"
                width={200}
                height={200}
            />
        </div>
    );
};

export default Home;

Steps to run the application:

npm run dev

Output:

Note: We can access the image uploaded to public folder in next.js by typing the image name in the url: http://localhost:3000/image.png