Nextsss

Overview

NextSSS is a Next.js starter template designed specifically for static sites. It includes a complete setup for TypeScript, Tailwind CSS, Google Analytics, Next SEO, and an active link component. This template is aimed at developers who want to quickly bootstrap their static site projects using Next.js.

Features

• Next.js Starter Template: A boilerplate setup for creating static sites using Next.js.
• TypeScript Support: Full support for TypeScript, enabling type-checking and code completion.
• Tailwind CSS: Integration with Tailwind CSS, a popular utility-first CSS framework.
• Google Analytics: Easy setup for including Google Analytics in the project.
• Next SEO: Integration with Next SEO, a plugin for handling metadata and SEO-related tasks in Next.js.
• Active Link Component: An active link component that dynamically adds an active class name to each link.
• Image Component: A custom image component with support for static export.

Installation

To use the NextSSS starter template, follow these steps:

1. Bootstrap the template by executing the following command using npm or Yarn:

   npx create-next-app next-sss-template
   

2. Edit the GA_TRACKING_ID variable in the /lib/gtag.ts file with your Google Analytics tracking ID.

3. Implement the active className on a link by adding the following code snippet to your project:

   // Example:
   <Link href="/" activeClassName="active">
     Home
   </Link>
   

4. Use the image component by importing it with a static export. Here’s an example:

   // Example:
   import Image from '../components/Image';
   
   export default function MyPage() {
     return (
       <div>
         <Image src="/path/to/image.png" alt="My Image" />
       </div>
     );
   }
   

5. If you plan to deploy the project to Vercel, make sure to remove the custom loader from the next.config.js and components/Image.tsx files.

Summary

NextSSS is a Next.js starter template built specifically for static sites, providing a pre-configured setup for TypeScript, Tailwind CSS, Google Analytics, Next SEO, an active link component, and an image component. With the easy installation guide and helpful resources provided, developers can quickly get started with their static site projects using NextSSS. The template is accompanied by a permissive MIT license, inviting contributions from the community.