π Boilerplate and Starter for Next.js 13+, Tailwind CSS and TypeScript
- π Auth structure with Context API
- π₯ Type checking TypeScript
- π Integrate with Tailwind CSS
- π Linter with ESLint (default NextJS, jsx-a11y, TS Eslint, Tailwind CSS)
- π Code Formatter with Prettier
- π¦ Husky for Git Hooks
- π‘ Absolute Imports using
@
prefix - π· Run tests on pull request with GitHub Actions
- π Send notification for Discord using webhooks
- Node.js 14+ and npm or yarn
Run the following command on your local environment:
git clone --depth=1 https://github.com/ayhan/nextjs-typescript-boilerplate-template-with-auth.git my-project-name
cd my-project-name
yarn
Then, you can run locally in development mode with live reload:
yarn dev
Open http://localhost:3000 with your favorite browser to see your project.
.
βββ README.md # README file
βββ .github # GitHub folder
βββ .husky # Husky configuration
βββ .vscode # VSCode configuration
βββ public # Public assets folder
βββ src
β βββ constants # Constants
β βββ context # Context API
β βββ models # Types
β βββ pages # Next JS Pages
β βββ service # Axios instance and fetcher for SWR
β βββ styles # Styles folder
βββ tailwind.config.js # Tailwind CSS configuration
βββ tsconfig.json # TypeScript configuration
You can easily configure Next js Boilerplate by making a search in the whole project with FIXME:
for making quick customization. Here is some of the most important files to customize:
src/styles/global.css
: your CSS file using Tailwind CSSsrc/service/instance.ts
: Must add baseURL in axios instance. If you need other axios instance create in this filesrc/context/auth.ts
: Login and userInfo request url change