Topic 36 of 47
public/
Overview
Next.js serves static files (images, fonts, robots.txt, favicon) from the `public` directory in the root folder. Files inside `public` are directly mapped to the base URL (`/`).
Syntax
tsx
project-root/
├── app/
└── public/
├── logo.png -> Accessed at /logo.png
├── robots.txt -> Accessed at /robots.txt
└── images/
└── hero.jpg -> Accessed at /images/hero.jpg
// In a component:
// Use an absolute path starting with '/' relative to the public folder.
export default function Header() {
return <img src="/logo.png" alt="Company Logo" />;
}Common Pitfalls
- Do not name a folder `public` inside the `app` directory. The `public` folder must be at the root of your project.
- Only files inside the `public` directory can be safely referenced via string paths like `'/image.png'`. Do not put source code in the public directory.
Real-World Example
Referencing static assets in metadata and code:
example
tsx
// app/layout.tsx
export const metadata = {
// Uses /favicon.ico automatically if placed in app/ directory,
// but explicit icons from /public can be defined
icons: {
icon: '/icon.png',
apple: '/apple-icon.png',
},
// OpenGraph images often live in public
openGraph: {
images: ['/og-image.jpg'],
},
};
export default function RootLayout({ children }) {
return <html><body>{children}</body></html>;
}