next-ts-tailwind-template

Next.js template with TypeScript, Tailwind, best linters and more.

Features

• ✅️ Next.js 14 (with the new app folder)
• ✅️ React 18
• ✅️ Tailwind CSS 3
• ✅️ TypeScript
• ✅️ SCSS
• ✅️ CSS Modules (Next.js built-in)
• ✅️ ESLint — Find and fix problems in your code
• ✅️ Stylelint — Find and fix problems in your CSS
• ✅️ Prettier — Format your CSS and assets
• ✅️ No Prettier on JS/TS code! — Use ESLint + Airbnb Style instead and get full control over the code style
• ✅️ Path Mapping — Import components or images using the @ prefix
• ✅️ Useful libs — clsx and lodash
• ✅️ Docker Ready
• ✅️ VSCode Ready
• ✅️ EditorConfig — Consistent indents across editors and IDEs
• ✅️ API Ready — Request and cache your API with axios and SWR

Steps

• Steps to recreate this template

Next steps you may do:

• Testing
• Component Libraries
• Data Fetching Management
• State Management
• Storybook
• SEO
• Translation
• Commit Convention
• Deployment
• Keep Dependencies Up-To-Date
• More VSCode Extensions
• Upgrading Next.js

More Resources

• Create T3 App
• superplate (and refine optionally)
• Vercel: Next.js App Playground

My App Title

Some description about my app.

Main Technologies

• Next.js + TypeScript
• Tailwind CSS
• SCSS + CSS Modules

Build Setup

Requirements

• Minimum Node.js version: 18.17

Installation

Install dependencies:

npm ci

Or install and update dependencies (update package-lock):

npm install

Launch development server

Serve with hot reload at localhost:3000

npm run dev

Lint

Find lint problems:

npm run lint

Auto-fix lint problems (be careful):

npm run lint:fix

API

Route Handlers can be accessed on /api/*, see /api/posts for example.
This endpoint can be edited in src/app/api/posts/route.ts.

Docker

1. Install Docker on your machine
2. Build your container: docker build -t nextjs-app:latest . -f docker/Dockerfile
3. Run your container: docker run -d -p 3001:3000 --name the-nextjs-app nextjs-app:latest

Or build and run with Docker Compose:

docker-compose -f docker/docker-compose.yml --env-file docker/docker-compose.env -p nextjs-app up -d

And visit localhost:3001

Development Tools

VSCode extensions

Use the Extensions: Show Recommended Extensions command to see the recommended extensions in VSCode.

Browser extension

React Developer Tools

Debugging

VSCode Debugging

Select Next: Full in the debugger drop-down menu, and start debugging by clicking on the green arrow or pressing F5 (don't run npm run dev in the same time).

If your server is already running (with npm run dev), you can start the client-only debugger by selecting Next: Chrome in the drop-down menu.

Contributing

Don't (: