Next.js | Tailwind | Typescript - TEMPLATE

About

A modern, production-ready template for building fast and maintainable web applications. This template combines the power of Next.js for server-side rendering and static site generation, Tailwind CSS for rapid UI development, and TypeScript for enhanced code quality and developer experience. Features include:

✨ Modern Stack: Built with Next.js 15, React 19, and TypeScript 5
🎨 Styling: Tailwind CSS with SASS support and a responsive grid system
🛠️ Developer Experience: Comprehensive VS Code setup with ESLint and Prettier
📱 Responsive Design: Mobile-first approach with customizable breakpoints
🚀 Performance: Optimized build configuration for maximum performance
🔧 Tooling: Pre-configured development tools and scripts

Table of Contents

• Prerequisites
• Getting Started
• VS Code Setup
  • Required Extensions
  • Additional Recommended Extensions
• Editor Configuration
• Version Management
  • Node.js Version
  • Yarn Version
• Styling Configuration
• Package Versions & Dependencies
  • Core Technologies
  • Styling & UI
  • Development Tools
  • Type Definitions
• Scripts
• GitHub Pages Setup
  • Configuration Steps
  • Custom Domain
• Grid Overlay Toggle
  • File Structure
  • Component Structure
  • Implementation
  • Breakpoints Configuration
  • Grid Layout

Prerequisites

Getting Started

1. Clone the repository:

git clone git@github.com:CFsylvester/next.js-tailwind-typescript-TEMPLATE.git [your-repo-name]
cd [your-repo-name]

2. Set up Node.js version:

# Set Node.js version (if using nvm)
nvm use

3. Install dependencies:

yarn install

4. Run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

VS Code Setup

When you first open this project in VS Code, you'll automatically be prompted to install the recommended extensions in the bottom right corner. You can also install all recommended extensions at once:

1. Open the Command Palette Cmd/Ctrl + Shift + P
2. Type "Show Recommended Extensions"
3. Click "Install Workspace Recommended Extensions" (the cloud icon in the top right)

Required Extensions

• Prettier - Code formatter - Code formatting
• ESLint - JavaScript/TypeScript linting
• Tailwind CSS IntelliSense - Intelligent Tailwind CSS tooling

Additional Recommended Extensions

• PostCSS Language Support - Modern CSS syntax highlighting
• Auto Rename Tag - Automatically rename paired HTML/JSX tags
• Path Intellisense - Autocomplete filenames
• npm Intellisense - Autocomplete npm modules
• TypeScript Next - Latest TypeScript features

Editor Configuration

This project includes a .vscode folder with shared settings for VS Code users. These settings will:

• Set Prettier as the default formatter
• Enable format on save
• Enable ESLint auto-fix on save
• Require a Prettier config file to be present
• Enable enhanced Tailwind CSS IntelliSense features

These settings ensure that:

• All code is automatically formatted on save using Prettier
• ESLint problems are automatically fixed when possible
• The project's Prettier configuration is always used
• Tailwind CSS IntelliSense provides:
  • Intelligent CSS class completion
  • Syntax highlighting for Tailwind classes
  • CSS class suggestions in template strings
  • Proper validation of Tailwind classes
  • Support for custom class attributes
  • Quick suggestions in JSX/TSX files

Version Management

This project uses:

• .nvmrc for Node.js version management (currently set to v20)
• engines in package.json to enforce Node.js (>=20.0.0) and Yarn (>=1.22.0) versions
• packageManager field in package.json to specify exact Yarn version (1.22.22)

Node.js Version

To automatically use the correct Node.js version:

• Run nvm use in the project directory

Yarn Version

The project is configured to use Yarn 1.22.22. When you run yarn install, it will verify that you're using a compatible version of Yarn. If you have an incompatible version, Yarn will show an error message indicating which version you need to use.

Styling Configuration

Core styling configuration files:

• tailwind.config.js - Configuration including:

  • Custom breakpoints
  • Color palette
  • Custom shadows
  • Screen sizes

• src/styles/globals.scss - Global styles including:

  • Grid layout system
  • Base styles
  • Tailwind imports

Package Versions & Dependencies

Core Technologies

• - React framework for production-grade applications
• - JavaScript library for building user interfaces
• - Adds static typing to JavaScript
• - JavaScript runtime
• - Utility-first CSS framework
• - CSS preprocessor for enhanced styling
• - CSS transformation tool
• - Module bundler (built into Next.js)

Styling & UI

- Automatically adds vendor prefixes to CSS rules

Development Tools

- Linting utility for JavaScript and TypeScript

• - Next.js specific ESLint rules
• - Disables ESLint rules that conflict with Prettier

- Code formatter for consistent code style

Type Definitions

• - TypeScript definitions for Node.js
• - TypeScript definitions for React
• - TypeScript definitions for React DOM

Scripts

• yarn dev - Run development server
• yarn build - Build for production
• yarn start - Start production server
• yarn lint - Run ESLint
• yarn lint:fix - Fix ESLint errors
• yarn format - Format code with Prettier
• yarn check-format - Check code formatting

GitHub Pages Setup

Configuration Steps

1. In your repository settings, go to Settings > Pages

2. Under Build and deployment:

   • Source: Deploy from a branch
   • Branch: Select either:
     • main and /root for serving from repository root
     • main and /docs if using a docs folder

3. Create (or update) .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Install dependencies
        run: yarn install

      - name: Build
        run: yarn build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: out

4. Update next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // Enable static exports
  basePath: process.env.NODE_ENV === 'production' ? '/your-repo-name' : '',
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

Custom Domain

If using a custom domain:

1. Add your domain in repository Settings > Pages > Custom domain
2. Create a CNAME file in your repository root:

your-domain.com

3. Update DNS settings with your domain provider:
   • Type: CNAME
   • Name: www (or subdomain)
   • Value: your-username.github.io

Grid Overlay Toggle

File Structure