Next.js starter template with TypeScript and TailwindCSS to kickstart your frontend / fullstack project.
This starter template includes:
- Next.js with
appdirectory - the React framework - React - Library for building user interfaces
- TypeScript - Your safety net when writing JavaScript
- pnpm - Fast and efficient package manager
- TailwindCSS - Utility first CSS
- ESLint & Prettier - Find & fix problems in the codebase and format code automatically on save
- Lucide React - Beautiful and consistent open-source icons for React
- Husky - Git hooks tool
- Commit Lint - Force devs to follow conventional commit message
- Lint Staged - Format & lint your code before committing, block commit if issues are detected
- Github Actions - Check, test, and build your code automatically on push and PR
- Dependabot - Create pull-request to update your dependencies
- Jest & React Testing Library - Unit test your components
-
Clone repo:
Tips: You can use degit to clone this repo without running
git clone. Learn moredegit hanstanawi/nextjs-starter-template your-app-name
or simply use this template on GitHub when creating new repository.
-
Install dependencies:
Make sure you have pnpm installed. Learn more about installing pnpm.
pnpm install -
Run the development server
pnpm dev
-
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying
app/page.tsx. The page auto-updates as you edit the file.
"What if I don't want to use Tailwind?"
You can use another React CSS framework or UI library, like Chakra UI, by simply removing Tailwind config and its dev dependencies.
-
Remove Tailwind config
rm -rf tailwind.config.ts postcss.config.js
-
Remove Tailwind directives on the
src/app/globals.cssYou need to remove these lines of code
@tailwind base; @tailwind components; @tailwind utilities;
-
Uninstall dev dependencies on
package.jsonpnpm remove tailwindcss postcss prettier-plugin-tailwindcss autoprefixer tailwind-merge clsx
-
Remove Tailwind
cnutility functionrm -rf src/lib/utils.ts
Now you have removed TailwindCSS config and its dependencies, we can add another UI library or CSS framework, in this example, we are going to use Chakra UI a great choice for a simple and good-to-go component library to build React components.
This docs guides you a quick start to setup Chakra UI on this project. To learn more about Chakra UI you can visit Chakra UI documentation
-
Install Chakra UI dependencies
pnpm add @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
-
Setup
ChakraProviderNext.js v13 uses server components by default. However, Chakra only works on client components. We need to create a provider client component that consists of React providers and add
use clientat the top of the file.-
Create
providers.tsxfile inappdirectory -
Add
CacheProviderandChakraProvideras providers.app/providers.tsx'use client'; import { CacheProvider } from '@chakra-ui/next-js'; import { ChakraProvider } from '@chakra-ui/react'; import { type PropsWithChildren } from 'react'; export default function Providers({ children }: PropsWithChildren) { return ( <CacheProvider> <ChakraProvider>{children}</ChakraProvider> </CacheProvider> ); }
-
-
Use
ChakraProvideron the root layoutIn order to use
ChakraProvideron the whole app. We need to import the providers in thelayout.tsxfileapp/layout.tsximport { Providers } from './providers'; import { type PropsWithChildren } from 'react'; export default function RootLayout({ children }: PropsWithChildren) { return ( <html lang="en"> <body> <Providers>{children}</Providers> </body> </html> ); }
-
You can start using Chakra UI components in the project.
This starter template uses Lucide React icons as the default icons library. You can switch to other React icons library such as React Icons or FontAwesome Icons
- Simply uninstall Lucide
pnpm remove lucide-react
- Install other icon library e.g. React Icons
pnpm add react-icons
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Learn TypeScript - an interactive course to learn TypeScript
- Learn TailwindCSS - learn about TailwindCSS and its documentation