Next Template

screenshot of Next Template

Next Template


The Next TemplateCSS-Modules is a template for building websites using Next.js. It utilizes CSS Modules, Storybook, a custom icon component with SVGR, and a custom theme with a built-in dark mode. It also includes a store implemented with React Context, supports Google Analytics, and is 100% progressive web app (PWA) compliant.


  • CSS Modules: Allows for local scoping of CSS styles, preventing style conflicts.
  • Storybook: Provides a development environment for UI components, allowing for isolated component testing and documentation.
  • Custom Icon Component with SVGR: Uses SVGR to create React components from SVG icons, allowing for easy customization and scalability.
  • Custom Theme (Built-in Dark Mode): Offers a pre-built dark mode feature, making it easy to switch between light and dark themes.
  • Store (React Context): Implements a store using React Context, allowing for state management across components.
  • Ready Google-Analytic: Provides integration with Google Analytics for tracking website usage and performance.
  • 100% PWA: Complies with the standards for progressive web apps, enabling features like offline accessibility and push notifications.


To install the Next TemplateCSS-Modules, follow these steps:

  1. Clone the repository from GitHub.
  2. Install the necessary dependencies by running the following command in your project directory:
    npm install
  3. Start the development server by running the command:
    npm run dev
  4. Open your browser and navigate to http://localhost:3000 to see the website running.


The Next TemplateCSS-Modules is a comprehensive template for building websites using Next.js. With features like CSS Modules, Storybook, a custom icon component with SVGR, a custom theme with a built-in dark mode, a store implemented with React Context, support for Google Analytics, and full progressive web app compliance, it provides a solid foundation for creating modern and feature-rich web applications.


Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.


React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.


A Progressive Web App (PWA) is a type of web application that uses modern web technologies to provide a native app-like experience to users, including offline functionality, push notifications, and device hardware access. PWAs can be installed on a user's home screen and launched like a traditional app, but do not require a separate app store listing or download.


Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.