DEV Community

Cover image for I Spent 30 Hours Building a Next.js Boilerplate So You Can Ship in 30 Minutes
Salman Shahriar
Salman Shahriar

Posted on

I Spent 30 Hours Building a Next.js Boilerplate So You Can Ship in 30 Minutes

#webdev #opensource #typescript #nextjs

The Problem That Kept Me Up at Night

You know that feeling when you start a new Next.js project and spend the first week just setting things up? Authentication, internationalization, role management, SEO configuration... By the time you're done with the boilerplate, you've lost all that initial excitement.

What you get in one line: Type-safe i18n with RTL support → Role-based access control → SEO-ready metadata → Dark mode theming → ESLint configuration → shadcn/ui components → All production-optimized and ready to ship.

I've been there. Too many times.

After launching my third SaaS project this year, I realized I was copy-pasting the same setup code over and over. So I decided to do something about it.

What I Built

Meet my production-ready Next.js boilerplate - not just another "hello world" starter template, but a fully-featured foundation that handles all the boring stuff so you can focus on building your actual product.

🔗 Live Demo | 📦 GitHub Repo

Boilerplate Screenshot

Why This Boilerplate is Different

🌍 Real Internationalization (Not Just a Dictionary)

I'm talking about type-safe translations that catch errors at compile time. No more broken translations in production because you typo'd a key.

Here's what makes it special:

  • Three languages out of the box: English, বাংলা (Bengali), and العربية (Arabic)
  • RTL support that actually works: Arabic layouts automatically flip to right-to-left
  • Dead-simple language switching: One click, zero page reload
  • Powered by i18next + TypeScript: Your IDE will literally tell you when a translation is missing 
// TypeScript knows all your translation keys
t('navigation.home') // ✅ Works
t('navigation.homer') // ❌ Compile error - typo caught!
Enter fullscreen mode Exit fullscreen mode

🔐 Role-Based Access Control That Scales

Most tutorials show you basic auth and call it a day. But what about when you need different dashboards for users and admins? Or when you want to add a "Moderator" role later?

I used Next.js 15's parallel routes to make this painless:

app/
  (protected)/
    @admin/      # Admin-only views
      dashboard/
    @user/       # User views
      dashboard/
    layout.tsx   # Smart routing logic
Enter fullscreen mode Exit fullscreen mode

The layout automatically shows the right dashboard based on the user's role. No messy conditionals scattered everywhere. Want to add a new role? Just create a new parallel route folder. That's it.

🎨 A Design System That Doesn't Suck

I'm using shadcn/ui because:

  • Components are copy-paste ready (no bloated dependencies)
  • Full TypeScript support
  • Accessible by default (WCAG compliant)
  • Easy to customize without fighting CSS

Plus, I've added light/dark mode with system preference detection. Because it's 2024.

🔧 ESLint That Actually Helps (Not Annoys)

Let's be honest - most ESLint configs are either too strict or too loose. I spent time configuring rules that:

  • Catch real bugs (unused variables, missing dependencies, potential null references)
  • Enforce consistency (import order, naming conventions, formatting)
  • Don't get in your way (no annoying warnings for things that don't matter)
  • Work with Next.js 15 (proper App Router support, server component rules)

The config includes:

  • eslint-config-next - Official Next.js rules
  • TypeScript-specific linting
  • Import sorting and organization
  • Best practices for React hooks
  • Accessibility checks (a11y)

Run npm run lint and get meaningful feedback, not noise.

📊 SEO Configuration That's Actually Usable

Instead of hardcoding metadata everywhere, I created a single JSON configuration file that handles:

  • Open Graph tags
  • Twitter cards
  • Structured data (JSON-LD)
  • Multi-language meta tags
  • Canonical URLs
  • Dynamic sitemap generation

Just edit one file:

{
  "appName": "Your App",
  "title": "Your Title",
  "description": "Your Description",
  "domain": "https://yoursite.com",
  "keywords": ["your", "keywords"],
  "social": {
    "twitter": "@yourhandle"
  }
}
Enter fullscreen mode Exit fullscreen mode

Done. SEO handled.

How to Get Started (The Real Way)

Step 1: Clone and Install 

# Grab the code
git clone https://github.com/salmanshahriar/nextjs-boilerplate-production-ready.git
cd nextjs-boilerplate

# Install dependencies (use whatever you prefer)
npm install
# or bun install / yarn install / pnpm install
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure Your Project

This is where most boilerplates leave you hanging. Not this one.

Edit app/SEO/app-main-meta-data.json:

{
  "appName": "My Awesome SaaS",
  "title": "Revolutionary Product That Does X",
  "description": "We help Y achieve Z",
  "domain": "https://myawesomesaas.com",

  "organization": {
    "name": "My Company",
    "email": "hello@mycompany.com"
  },

  "social": {
    "twitter": "@myhandle",
    "github": "https://github.com/myhandle"
  }
}
Enter fullscreen mode Exit fullscreen mode

That's your entire brand configuration. One file.

Step 3: Customize Your Languages (Optional)

Want to add Spanish? Here's how:

  1. Create locales/es/common.json: 
{
  "navigation": {
    "home": "Inicio",
    "about": "Acerca de"
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Update app-main-meta-data.json: 
{
  "languages": {
    "supported": ["en", "bn", "ar", "es"],
    "locales": {
      "es": {
        "code": "es",
        "name": "Spanish",
        "nativeName": "Español",
        "locale": "es_ES",
        "direction": "ltr"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Update lib/i18n.ts to include "es"

Done. Your app now speaks Spanish.

Step 4: Set Up Your Roles

The boilerplate comes with User and Admin roles. To add more:

  1. Create a new parallel route folder: 
mkdir -p app/(protected)/@moderator/dashboard
Enter fullscreen mode Exit fullscreen mode

  1. Add your pages inside that folder

  2. Update app/(protected)/layout.tsx to handle the new role:

if (role === 'MODERATOR') return moderator
Enter fullscreen mode Exit fullscreen mode

That's genuinely all you need to do.

Step 5: Run It 

npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 and see your fully-configured app running.

The Project Structure (Explained for Humans) 

app/
  (protected)/           # Everything behind auth
    @admin/             # Admin-only pages
    @user/              # User pages
    layout.tsx          # Smart routing happens here

  SEO/                  # Your SEO brain
    app-main-meta-data.json

  layout.tsx            # Root layout (theme, i18n setup)
  page.tsx              # Landing page

components/             # Your UI components
  ui/                   # shadcn/ui components

locales/                # Translation files
  en/, bn/, ar/        # One folder per language

lib/                    # Utilities and config
  i18n.ts              # i18n setup
  utils.ts             # Helper functions
Enter fullscreen mode Exit fullscreen mode

What You Get Out of the Box

✅ Next.js 15 with App Router and Server Components

✅ TypeScript configured properly (strict mode enabled)

✅ Tailwind CSS with a sensible configuration

✅ ESLint with Next.js 15, TypeScript, and a11y rules

✅ i18n with type safety and RTL support

✅ RBAC with parallel routes architecture

✅ SEO with JSON-based configuration

✅ Dark mode with system preference detection

✅ Accessible components from shadcn/ui

✅ Production optimizations (code splitting, lazy loading, image optimization)

Real Talk: When Should You Use This?

Perfect for:

  • SaaS products with multiple user types
  • International applications
  • MVPs that need to look professional
  • Projects where you want to ship fast

Maybe not ideal for:

  • Simple landing pages (too much infrastructure)
  • Projects with very specific auth requirements (you'll need to customize heavily)
  • Apps that don't need i18n or role management

What I Learned Building This

  1. Parallel routes are underrated: They make role-based routing so much cleaner than conditional rendering
  2. Type-safe i18n is worth the setup: Catching translation bugs at compile time saves hours of debugging
  3. JSON configuration > hardcoded values: When you can change your entire SEO strategy by editing one file, you move faster
  4. Boilerplates should be opinionated: Too many options = decision fatigue. I made the tough choices so you don't have to

Contributing & Support

Found a bug? Want to add a feature? The repo is fully open source:

🐛 Report issues

⭐ Star on GitHub

🤝 Submit a PR

Final Thoughts

I built this because I got tired of setting up the same infrastructure for every project. If you're launching a product and don't want to spend two weeks on boilerplate, give it a try.

It's saved me probably 40+ hours across my last three projects. Maybe it'll help you too.

What's your biggest pain point when starting a new Next.js project? Drop a comment below - I'm always looking to improve this.

Happy building! 🚀

Top comments (0)