Ultimate Front-end Template
Most elements are taken from my website.
Ingredients ✨:
- NextJS ?
- TailwindCSS ?
- Typescript ?
- Dark Mode Support ?
- ESLint + Prettier Config ?
- Husky ?
- Self-Hosted Inter Font ␊
Under the components folder, use Container for each of your pages – as it provides a reusable starting point for every page.
<Container>...pageElements</Container>
Getting started
-
With ‘use as template’ repository
-
Clone the project
# http
git clone https://github.com/cristicretu/ts-next-tailwind-template.git
# ssh
git clone [email protected]:cristicretu/ts-next-tailwind-template.git
- With
create-next-app
npx create-next-app -e https://github.com/cristicretu/ts-next-tailwind-template project-name
Install the required packages and run the template
cd project-name
yarn install
Included
Custom classNames function
Under
/lib/classNames
Packages
- Next-themes: An abstraction for themes in your Next.js app.
- react-use: react-hooks
Custom globals.css
- custom underline
- vercel navbar
- removes firefox, edge and ie. bugs with overflows
Absolute Imports
import TextField from '../../../components/TextField.tsx'
changes to
import TextField from 'components/TextField.tsx'
SEO optimization found in Container.tsx
Folder structuring & organization
Under
/components/&/public/
Self Hosted Inter Font
Under
/public/fonts/
404 Page
Favicons and more configs
Under
/public/static/favicons/
