Static Assets - Complete Next.js Tutorial

📁 What are Static Assets?

Static assets are files like images, fonts, and documents that don't change. Next.js serves these files from the public folder, making them accessible via URL paths for your application.


// Access files from the public folder
<img src="/logo.png" alt="Logo" />
<link rel="icon" href="/favicon.ico" />

Public Folder Structure

Next.js uses the public folder at the root of your project to serve static files. Any file inside public can be referenced starting from the base URL.

🖼️

Images

Store images in public folder

/public/images/ /public/icons/

📄

Documents

PDFs and downloadable files

/public/docs/ /public/files/

🔤

Fonts

Custom font files

/public/fonts/ .woff, .woff2

⚙️

Config Files

Robots, sitemap, manifest

robots.txt sitemap.xml

🔹 Using Images

Next.js provides an optimized Image component for better performance. Place images in the public folder and reference them with a forward slash.

import Image from 'next/image'

export default function Page() {
  return (
    <div>
      {/* Regular img tag */}
      <img src="/logo.png" alt="Logo" width="200" />
      
      {/* Next.js Image component (optimized) */}
      <Image 
        src="/hero.jpg" 
        alt="Hero" 
        width={800} 
        height={600} 
      />
    </div>
  )
}

Folder Structure:

my-app/
├── public/
│   ├── logo.png
│   ├── hero.jpg
│   └── favicon.ico
└── app/
    └── page.js

🔹 Serving Documents

You can serve downloadable files like PDFs directly from the public folder. Users can access them via direct URLs or download links.

export default function Downloads() {
  return (
    <div>
      <h1>Download Resources</h1>
      
      {/* Direct link to PDF */}
      <a href="/docs/guide.pdf" download>
        Download Guide
      </a>
      
      {/* Link to open in new tab */}
      <a href="/files/resume.pdf" target="_blank">
        View Resume
      </a>
    </div>
  )
}

🔹 Using Custom Fonts

Store font files in the public folder and reference them in your CSS. Next.js also provides a built-in font optimization system.

🔸 Method 1: Public Folder

/* In your CSS file */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

🔸 Method 2: Next.js Font Optimization

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

🔹 Favicon and Metadata Files

Place your favicon and other metadata files directly in the public folder for easy access by browsers and search engines.

// app/layout.js
export const metadata = {
  title: 'My Next.js App',
  description: 'Welcome to my app',
  icons: {
    icon: '/favicon.ico',
  },
}

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

Common Files in Public:

favicon.ico - Browser tab icon
robots.txt - Search engine instructions
sitemap.xml - Site structure for SEO
manifest.json - PWA configuration

🔹 Best Practices

Follow these guidelines when working with static assets in Next.js:

Organize files: Use subfolders like /images, /docs, /fonts
Optimize images: Use Next.js Image component for automatic optimization
Use descriptive names: hero-banner.jpg instead of img1.jpg
Keep it clean: Only store truly static files in public
Cache-friendly: Files in public are cached by browsers

Static Assets in Next.js