Skip to content

ayhan/nextjs-typescript-boilerplate-template-with-auth

Repository files navigation

Boilerplate and Starter for Next JS, Tailwind CSS and TypeScript

πŸš€ Boilerplate and Starter for Next.js 13+, Tailwind CSS and TypeScript

Features

  • πŸ” 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

Requirements

  • Node.js 14+ and npm or yarn

Getting started

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

Customization

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 CSS
  • src/service/instance.ts: Must add baseURL in axios instance. If you need other axios instance create in this file
  • src/context/auth.ts: Login and userInfo request url change