/nextjs-template

A cool nextjs template to start your projects faster

Primary LanguageTypeScript

Requirements

  • node 18.x.x

    if you are using nvm, nvm use in your terminal

Quick start 🚀

Install packages

  yarn (or `npm install` if you prefer npm)

Run development

  yarn dev

yarn dev -p [PORT] if you want to run in another specific port

Visit page

  http://localhost:3000

Scripts

  • yarn dev — Starts the application in development mode at http://localhost:3000.
  • yarn build — Creates an optimized production build of your application.
  • yarn start — Starts the application in production mode.
  • yarn type-check — Validate code using TypeScript compiler.
  • yarn lint — Runs ESLint for all files in the src directory.
  • yarn format — Runs Prettier for all files in the src directory.

Directory Structure

  • .github — GitHub configuration including the CI workflow.
  • .husky — Husky configuration and hooks.
  • public — Static assets such as robots.txt, images, and favicon.
  • src — Application source code, including pages, components, styles.

Path Mapping

TypeScript are pre-configured with custom path mappings. To import components or files, use the @ prefix.

import { Button } from '@/components/Button';

// To import images or other files from the public folder
import avatar from '@/public/avatar.png';

and tsconfig.json

"paths": {
  "@/components/*": ["./src/components/*"],
}

Stack

  • ⚡️ Next.js 13
  • ⚛️ React 18
  • ⛑ TypeScript
  • 💖 TailwindCSS
  • 🦑 Testing library + Jest - Testing frameworks to encourage good practices
  • 📏 ESLint — To find and fix problems in your code
  • 💖 Prettier — Code Formatter for consistent style
  • 🐶 Husky — For running scripts before committing
  • 🚓 Commitlint — To make sure your commit messages follow the convention