next-ts-tailwind-template

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

Features

• ✅️ Next.js 13 (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
• State Management
• Storybook
• SEO
• Translation
• Commit Convention
• Deployment
• Keep Dependencies Up-To-Date
• More VSCode Extensions

More Resources

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

---

App Title

Some description about the app.

Main Technologies

• Next.js

  React framework for production.

• Tailwind CSS

  Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Build Setup

Requirements

• Minimum Node.js version: 14.18.0

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/*, like /api/posts.
This endpoint can be edited in src/app/api/posts/route.ts.

Docker

Build and run docker (listen on port 3001):

docker build -t nextjs-app:latest . -f docker/Dockerfile
docker run -d -p 3001:3000 --name the-nextjs-app nextjs-app:latest

Or with docker-compose:

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

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 (: