Extra Config

Overview

Proper configuration of site icons and social media images enhances your application's professional appearance and improves SEO. This guide covers how to set up various icon types and configure your sitemap for better search engine visibility.

Site Icons and Favicons

Site icons serve as visual identifiers for your application in browser tabs, bookmarks, and device home screens.

Required Icon Files

• favicon.ico - The classic favicon displayed in browser tabs (16x16, 32x32)
• icon.png - Modern high-resolution icon (512x512 recommended)
• apple-icon.png - Icon for iOS devices when saved to home screen (180x180)

Where to Place Icons

Next.js 13+ uses a specific folder structure for these icons:

frontend/app/
├─ favicon.ico       # Place in app root
├─ icon.png          # Place in app root
├─ apple-icon.png    # Place in app root

Generating Favicon Files

To quickly create favicon files from your logo or icon, use Favicon.io or RealFaviconGenerator. These tools generate all required icon sizes and formats from a single source image.

Social Media Images

Social media images appear when your site is shared on platforms like Twitter, Facebook, or LinkedIn. Well-designed social cards significantly increase click-through rates and engagement.

Required Social Images

• opengraph-image.png - Shown when sharing on Facebook, LinkedIn, etc. (1200x630)
• twitter-image.png - Optimized for Twitter cards (1200x600)

Where to Place Social Images

frontend/app/
├─ opengraph-image.png    # Place in app root
├─ twitter-image.png      # Place in app root

Creating Social Images

For professional-looking social images:

• Use design tools like Figma, Canva, or Adobe Photoshop
• Include your logo, tagline, and a simple background
• Keep text minimal and large enough to read at small sizes
• Save as PNG for best quality

Sitemap Configuration

ZapStart automatically generates a sitemap.xml file to help search engines discover and index your pages. Customize the sitemap configuration in the next-sitemap.config.js file, you will find documentation in the file.

Next.js Security Configuration

Next.js allows you to configure important security headers that help protect your application against common web vulnerabilities. These settings can be configured in your next.config.js file.

Security Headers

const nextConfig = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          // Enable strict HTTPS (HSTS)
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=63072000; includeSubDomains; preload'
          },
          // Prevent MIME type sniffing
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff'
          },
          // Control browser features
          {
            key: 'Permissions-Policy',
            value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()'
          },
          // Control how much referrer information is included
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin'
          },
          // Prevent clickjacking
          {
            key: 'X-Frame-Options',
            value: 'DENY'
          },
          // Help prevent XSS attacks
          {
            key: 'X-XSS-Protection',
            value: '1; mode=block'
          },
        ]
      }
    ];
  },
};

module.exports = nextConfig;

Copy all or part of the security headers above and paste it in the next.config.js file. Chosee the headers that you need.

const nextConfig = {
  async headers() {
    const headers = [
      // Headers for all environments
      {
        key: 'X-Content-Type-Options',
        value: 'nosniff'
      }
    ];
    
    // Add production-only headers
    if (process.env.NODE_ENV === 'production') {
      headers.push(
        {
          key: 'Strict-Transport-Security',
          value: 'max-age=63072000; includeSubDomains; preload'
        },
        {
          key: 'Content-Security-Policy',
          value: "default-src 'self';" // Your production CSP
        }
      );
    }
    
    return [{ source: '/:path*', headers }];
  }
};