yourwillyourwish/public

Public Assets Directory

This directory contains static files that are served directly by Next.js at the root URL.

Directory Structure

public/
├── images/          # Image assets (logos, icons, photos)
├── fonts/           # Custom font files
├── favicon.ico      # Website favicon
├── manifest.json    # PWA manifest
├── robots.txt       # Search engine crawling rules
└── sitemap.xml      # SEO sitemap

Usage

Images

Place images in /public/images/ and reference them in your components:

// In any component
<img src="/images/logo.png" alt="Logo" />

// Or with Next.js Image component
import Image from 'next/image'

<Image 
  src="/images/hero.jpg" 
  alt="Hero" 
  width={1200} 
  height={600}
/>

Fonts

Place custom fonts in /public/fonts/ and reference in your CSS:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2'),
       url('/fonts/custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Favicon

Replace favicon.ico with your own favicon. Supported formats:

• .ico (recommended for broad compatibility)
• .png or .svg (modern browsers)

Manifest (PWA)

Edit manifest.json to customize your Progressive Web App settings:

• App name and description
• Theme colors
• App icons
• Display mode

Update icons:

• Create 192x192px icon → /images/icon-192.png
• Create 512x512px icon → /images/icon-512.png

Robots.txt

Edit robots.txt to control search engine crawling:

• Allow/disallow specific paths
• Update sitemap URL with your domain

Sitemap.xml

Update sitemap.xml with your actual pages:

• Replace your-domain.com with your actual domain
• Add/remove URLs as needed
• Update lastmod dates
• Set appropriate priorities

Best Practices

Images

• ✅ Use WebP format for better compression
• ✅ Optimize images before upload (TinyPNG, ImageOptim)
• ✅ Use descriptive filenames: hero-banner.jpg not img1.jpg
• ✅ Keep images under 500KB when possible

Fonts

• ✅ Use WOFF2 format for best compression
• ✅ Subset fonts to include only needed characters
• ✅ Limit to 2-3 font families maximum

File Organization

images/
  ├── logos/
  │   ├── logo.svg
  │   └── logo-white.svg
  ├── icons/
  │   ├── icon-192.png
  │   └── icon-512.png
  └── content/
      ├── hero-banner.jpg
      └── about-team.jpg

Accessing Static Files

All files in public/ are accessible at the root URL:

• /public/images/logo.png → https://yourdomain.com/images/logo.png
• /public/robots.txt → https://yourdomain.com/robots.txt
• /public/manifest.json → https://yourdomain.com/manifest.json

SEO & Performance

For Better SEO:

1. Update robots.txt with your actual domain
2. Customize sitemap.xml with all your pages
3. Add Open Graph images to /images/
4. Create proper favicons for all devices

For Better Performance:

1. Optimize all images before uploading
2. Use Next.js <Image> component for automatic optimization
3. Enable caching headers in production
4. Use SVG for logos and icons when possible

Production Deployment

The public/ folder is automatically included in your Docker image and deployed with your application. No additional configuration needed!

Notes

• ⚠️ Don't put sensitive files here - they're publicly accessible!
• ⚠️ File names are case-sensitive on Linux servers
• ⚠️ Avoid spaces in filenames - use hyphens instead
• ✅ This directory is included in your Git repository
• ✅ Works seamlessly with Coolify deployment