Next.js + Tailwind CSS + TypeScript Starter

This is a Next.js, Tailwind CSS, and Typescript project bootstrapped using ts-nextjs-tailwind-starter created by Theodorus Clarence.

Getting Started

To use this template you can use one of the three ways:

1. Using create-next-app

npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter project-name

2. Use this repository as template

3. Deploy to Vercel

Then, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/pages/index.tsx. The page auto-updates as you edit the file.

What's Inside

1. Installed Package

1. clsx, utility for constructing className strings conditionally.
2. react-icons, svg react icons of popular icon packs.

2. UnstyledLink Component

Used as a component for Next.js Link. Will render out Next/Link if the href started with / or #, else will render an a tag with target='_blank'. Also add a cursor style for outside links

3. CustomLink Component

4. Absolute Import

You can import without using relative path

import Nav from '../../../components/Nav';

simplified to

import Nav from '@/components/Nav';

5. Seo Component

Configure the default in src/components/Seo.tsx. If you want to use the default, just add <Seo /> on top of your page.

You can also customize it per page by overriding the title, description as props

<Seo title='Next.js Tailwind Starter' description='your description' />

or if you want to still keep the title like %s | Next.js Tailwind Starter, you can use templateTitle props.

6. Custom 404 Page

7. Workspace Snippets

Snippets such as React import, useState, useEffect, React Component. View more

8. Husky, Prettier, Lint, and Commitlint Configured

3 Husky hooks including:

1. pre-commit, running next lint and format the code using prettier
2. commit-msg, running commitlint to ensure the use of Conventional Commit for commit messages
3. post-merge, running yarn every git pull or after merge to ensure all new packages are installed and ready to go

9. Default Favicon Declaration

Use Favicon Generator and then overwrite the files in /public/favicon

10. Default Tailwind CSS Base Styles

There are default styles for responsive heading sizes, and .layout to support a max-width for larger screen size. Find more about it on my blog post

11. Preloaded & Self Hosted Inter Fonts

Inter fonts is a variable fonts that is self hosted and preloaded.