DEV Community

Cover image for NextSSS, Next.js static site starter
Kite
Kite

Posted on

NextSSS, Next.js static site starter

#nextjs #react #typescript #javascript

I made a Next.js starter template especially for static site. It includes full setup for TypeScript, Tailwind CSS, Sass, Google Analytics, Next SEO, active link component, etc.

GitHub: https://github.com/ixkaito/nextsss

How to Use

Execute create-next-app with npm or Yarn to bootstrap the template:

npx create-next-app --example https://github.com/ixkaito/nextsss
# or
yarn create next-app --example https://github.com/ixkaito/nextsss
Enter fullscreen mode Exit fullscreen mode

Google Analytics

Edit GA_TRACKING_ID in /lib/gtag.ts.

Example:

export const GA_TRACKING_ID = 'G-XXXXXXXXXX'
Enter fullscreen mode Exit fullscreen mode

Active className on a link

Example:

import Link from '../components/ActiveLink'

const Nav: React.FC = () => {
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about/">
        <a>About</a>
      </Link>
    </nav>
  )
}

export default Nav
Enter fullscreen mode Exit fullscreen mode

This will dynamically add the active class name to each links. You can also change the activeClassName like this:

import Link from '../components/ActiveLink'

const Nav: React.FC = () => {
  return (
    <nav>
      <Link href="/" activeClassName="current">
        <a>Home</a>
      </Link>
      <Link href="/about/" activeClassName="current">
        <a>About</a>
      </Link>
    </nav>
  )
}

export default Nav
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

prince_beec5ccde00b7c6c73 profile image

Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/

Prince -

mert_izgahi_e1e5719866b86 profile image

Join To My Journey to learn building full stack web application

Mert izgahi -

peterlidee profile image

Synchronous and asynchronous searchParams in Next 15

Peter Jacxsens -

ariflogs profile image

Building an UI library that does not look generic!

Arif Hossain -