144 lines
3.6 KiB
Markdown
144 lines
3.6 KiB
Markdown
# 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:
|
|
|
|
```tsx
|
|
// 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:
|
|
|
|
```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
|