Skip to content

Latest commit

 

History

History
143 lines (132 loc) · 3.61 KB

README.md

File metadata and controls

143 lines (132 loc) · 3.61 KB

Next.js 14 Project Configuration

This project is built using Next.js 14, offering a highly performant, scalable, and maintainable web application structure. Below are some of the core configurations implemented to optimize the project.

Key Features

  • Styled-Components Support: Styled-components are enabled to allow writing actual CSS syntax in JavaScript, ensuring seamless styling and theming.

    compiler: {
    styledComponents: true,
}```

  • **Standalone Build: The project is output as a standalone application for easy deployment across different environments.

    output: 'standalone',

  • **Optimized Image Handling: Configured image domains for optimized images, cache settings, device sizes, and preferred formats like avif and webp.

images: {
    domains: ['yourdomain.com.au', 'localhost'],
    minimumCacheTTL: 60,
    deviceSizes: [640, 750, 1080, 1200, 1920],
    formats: ['image/avif', 'image/webp'],
}
  • **Caching Strategy: Custom caching for static assets and API routes for better performance.
async headers() {
    return [
        {
            source: '/api/:path*',
            headers: [
                { key: 'Cache-Control', value: 's-maxage=86400, stale-while-revalidate=59' },
            ],
        },
        {
            source: '/public/images/static/:path*',
            headers: [
                { key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
            ],
        },
        {
            source: '/_next/static/:path*',
            headers: [
                { key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
            ],
        },
    ];
}
  • **API Route Rewrites: Proxy API requests to an external CMS to separate frontend and backend concerns.
 async rewrites() {
   return [
       {
           source: '/api/:path*',
           destination: 'https://cms.yourdomain.com/:path*',
       },
   ];
}
  • **Webpack Customization: Memory-based caching is enabled for optimized performance in production.
webpack: (config, { dev }) => {
    if (config.cache && !dev) {
        config.cache = {
            type: 'memory',
        };
    }
    return config;
}
  • **SWC Minification: Enabled for faster builds and code optimization.
swcMinify: true,
  • ***CSS & Font Optimization: CSS optimization is enabled, and fonts are loaded asynchronously to enhance performance.
optimizeCss: true,
optimizeFonts: true,
  • **PWA Support: Progressive Web App (PWA) support is enabled, with a custom service worker caching strategy to provide offline capabilities.
pwa: {
    dest: 'public',
    runtimeCaching: [
        {
            urlPattern: /^https?.*/,
            handler: 'NetworkFirst',
            options: {
                cacheName: 'https-cache',
                expiration: {
                    maxEntries: 200,
                },
            },
        },
    ],
}
  • **Scroll Restoration: Maintains scroll position on route changes, improving user experience.
experimental: {
    scrollRestoration: true,
}

##Development & Build Setup

  • **Clone the repository
git clone https://github.com/your-repo.git
  • **Install dependencies
npm install
  • **Run the development server
npm run dev
  • **Build for production
npm run build
  • **Start the production server
npm start

##Linting & ESLint

  • **ESLint errors are ignored during production builds for faster deploys.
eslint: {
    ignoreDuringBuilds: true,
}


Feel free to adjust any parts to better suit your project, especially the repository link and any specific project details.