snxtw — Next.js Directory site Template

SHA-256: 0e0da50a752d8d2bbb283c2645902b15a4850435c7c521ae79771aa4bab9546c

2026-10-03T05:52:05.061Z

# Next.js (App Router) + Tailwind CSS + Typescript Starter Template

<img alt="snxtw" src="https://github.com/bonabrian/snxtw/assets/14372275/137dc56d-b0a4-4e49-b91d-a30137ed5166">

<div align="center">
  <a href="https://vercel.com/new/clone?repository-url=https://github.com/bonabrian/snxtw" target="_blank"><img src="https://vercel.com/button" alt="Deploy with Vercel" /></a> <a href="https://app.netlify.com/start/deploy?repository=https://github.com/bonabrian/snxtw" target="_blank"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a> <a href="https://railway.app?referralCode=vMv3VV" target="_blank"><img src="https://railway.app/button.svg" alt="Deploy on Railway" height="32px" /></a>

  <p>A <a href="https://nextjs.org/docs/app" target="_blank">Next.js</a> (App Router) starter kit template with <a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a> and <a href="https://www.typescriptlang.org/" target="_blank">Typescript</a></p>
</div>

[![CodeFactor](https://www.codefactor.io/repository/github/bonabrian/nextjs-starter-tailwind/badge)](https://www.codefactor.io/repository/github/bonabrian/nextjs-starter-tailwind)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=bonabrian_nextjs-starter-tailwind&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=bonabrian_nextjs-starter-tailwind) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=bonabrian_nextjs-starter-tailwind&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=bonabrian_nextjs-starter-tailwind) [![Bugs](https://sonarcloud.io/api/project_badges/measure?project=bonabrian_nextjs-starter-tailwind&metric=bugs)](https://sonarcloud.io/summary/new_code?id=bonabrian_nextjs-starter-tailwind) [![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=bonabrian_nextjs-starter-tailwind&metric=code_smells)](https://sonarcloud.io/summary/new_code?id=bonabrian_nextjs-starter-tailwind) [![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=bonabrian_nextjs-starter-tailwind&metric=duplicated_lines_density)](https://sonarcloud.io/summary/new_code?id=bonabrian_nextjs-starter-tailwind)

## Features

This repository is 🔋 ⚡ battery packed with:

- 🔥 [Next.js](https://nextjs.org/docs/app) with app router directory structure
- ⚛️ [React](https://react.dev/)
- ⚡️ [Typescript](https://www.typescriptlang.org/)
- 💅 [Tailwind CSS](https://tailwindcss.com/)
- 💎 Pre-built Components
- ⚙️ SEO metadata
- 📏 [ESLint](https://eslint.org/) — Find and fix problems in your code
- 💖 [Prettier](https://prettier.io/) — Format your code consistently
- 🐶 [Husky](https://typicode.github.io/husky/#/) & [Lint Staged](https://github.com/okonet/lint-staged) — Run scripts on your staged files before they are committed
- 🤖 [Conventional Commit Lint](https://github.com/conventional-changelog/conventional-changelog)

## Getting Started

### 1. Clone this template using one of these ways:
1. You can simply click `Use this template` button on this repository 
   Please be aware that there will be an attribution on your repository. It would be greatly appreciated if you could leave this attribution intact, as it will help others discover and benefit from this template as well. Thank you! 😄"
   
   ![Use as template](https://github.com/bonabrian/nextjs-starter-tailwind/assets/14372275/a7ab09e3-8826-4d48-897e-ccad1b3e6e1d)

2. Using `create-next-app`
   ```bash
   npx create-next-app -e https://github.com/bonabrian/snxtw project-name
   ```

3. Using `degit`
   ```bash
   npx degit bonabrian/snxtw YOUR_APP_NAME
   ```

### 2. After cloning this project, install dependencies
It is encouraged to use **yarn** so the husky hooks can work properly.

```bash
yarn install
```

### 3. Run development server
You can start the server using this command:
```bash
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `src/app/page.tsx`.