This is a Next.js, Tailwind CSS, and Typescript project bootstrapped using ts-nextjs-tailwind-starter created by Theodorus Clarence.
To use this template you can use one of the three ways:
npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter project-name
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.
- clsx, utility for constructing
className
strings conditionally. - react-icons, svg react icons of popular icon packs.
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
You can import without using relative path
import Nav from '../../../components/Nav';
simplified to
import Nav from '@/components/Nav';
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.
Snippets such as React import, useState, useEffect, React Component. View more
3 Husky hooks including:
- pre-commit, running
next lint
and format the code using prettier - commit-msg, running commitlint to ensure the use of Conventional Commit for commit messages
- post-merge, running
yarn
everygit pull
or after merge to ensure all new packages are installed and ready to go
Use Favicon Generator and then overwrite the files in /public/favicon
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
Inter fonts is a variable fonts that is self hosted and preloaded.