Next.js Boilerplate

A modern Next.js boilerplate with TypeScript, App Router, SASS/SCSS with CSS Modules, and Digital Ocean deployment configuration.

Features

• ⚡ Next.js 15 with App Router
• 📘 TypeScript
• 🎨 SASS/SCSS with CSS Modules (component.module.scss pattern)
• ☁️ Digital Ocean App Platform configuration

Prerequisites

• Node.js 18.17.0 or later (required for Next.js 15)
• npm 9.0.0 or later

To check your Node.js version:

node --version

If you need to upgrade Node.js:

• Using nvm (recommended): nvm install 18.17.0 && nvm use 18.17.0
• Using Homebrew (macOS): brew install node@18
• Download: Node.js official website

Getting Started

First, install the dependencies:

npm install
# or
yarn install
# or
pnpm install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

Project Structure

├── app/                    # App Router directory
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   └── globals.scss       # Global styles
├── components/            # React components
│   └── Home/
│       ├── Home.tsx       # Component file
│       └── Home.module.scss  # Component styles (CSS Modules)
├── public/                # Static assets
├── .do/                   # Digital Ocean configuration
│   └── app.yaml          # App Platform config
├── next.config.js         # Next.js configuration
├── tsconfig.json          # TypeScript configuration
└── package.json           # Dependencies

SASS/SCSS with CSS Modules

This project uses SASS with CSS Modules. Each component should have its own .module.scss file following the naming convention: ComponentName.module.scss.

Example Usage

// components/Button/Button.tsx
import styles from './Button.module.scss'

export default function Button() {
  return <button className={styles.button}>Click me</button>
}

// components/Button/Button.module.scss
.button {
  padding: 1rem 2rem;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 4px;
  
  &:hover {
    background-color: #0051cc;
  }
}

Deployment to Digital Ocean

1. Push your code to a GitHub repository
2. Go to Digital Ocean App Platform
3. Click "Create App" and connect your GitHub repository
4. Digital Ocean will auto-detect the Next.js configuration
5. Update the .do/app.yaml file with your repository details:

   github:
     repo: your-username/wp-freq
     branch: main

6. Deploy!

The app will automatically rebuild and deploy on every push to the main branch.

Environment Variables

Make sure to set the following environment variables in your Digital Ocean app settings:

• NODE_ENV=production
• NEXT_TELEMETRY_DISABLED=1

Add any other environment variables your app needs in the Digital Ocean dashboard or .do/app.yaml.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• SASS Documentation - learn about SASS features.
• Digital Ocean App Platform Docs - deployment guide.