NextSSS, Next.js static site starter
Kite
Posted on July 20, 2021
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
Google Analytics
Edit GA_TRACKING_ID in /lib/gtag.ts.
Example:
export const GA_TRACKING_ID = 'G-XXXXXXXXXX'
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
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
💖 💪 🙅 🚩
Kite
Posted on July 20, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
