Static File Serving in NextJS
🚀 Static File Serving in Next.js
Next.js allows you to serve static files (images, fonts, PDFs, etc.) from the public directory. These files are accessible directly via the browser.
📌 1. Where to Place Static Files?
Place your static assets inside the public/ folder at the root of your Next.js project.
<div> <a href="/files/document.pdf" download>Download PDF</a>
✅ Directly serves the file without processing
📌 5. When to Use public/ vs. static Imports?
| Use Case | public/ Folder | import in Component |
|---|---|---|
| Static images | ✅ Yes (/images/logo.png) | ❌ No |
| Optimized images | ✅ Yes (<Image src="/images/logo.png" />) | ✅ Yes (import logo from "./logo.png") |
| PDFs, fonts | ✅ Yes | ❌ No |
| Icons, small assets | ❌ No | ✅ Yes (import in JS) |
📌 6. Summary: Best Practices
✅ Store static files in public/ for easy access
✅ Use <Image> for optimized images
✅ Directly link to PDFs and other files
