Nextjs clean architecture boilerplate

Table of content

  • Overview
  • Technologies
  • Architecture
  • Folder Structure
  • Getting started
  • Guildline

Overview

This project is a starting point for your medium to large scale projects with Nextjs, to make sure having a structured, maintainable and reusable base for your project based on best practices in clean architecture, DDD approach for business logics, MVVM for the frontend part, storybook and vitest for testing logics and ui part and also functional programming with error handling for business logics.

Motivation

Nextjs and many other new SSR tools provide a really good and new approach to handle frontend applications, with new tools to bring a new good experience for users. But as they're new and they just tried to bring new tools and features and also frontend community, didn't talk about software engineering and best practices approach for this tools.

So in many cases we see many teams uses nextjs to just use its tools and features as much as they can but they don't care about the best practices, architecture and software engineering approach. So there are many projects with Nextjs which is not maintainable and specially in medium to large scale applications, through the time it'll be really hard to manage to even impossible to add new features and it cause business failures.

So I decided to make a base firm and maintanable boilerplate for most faviorite SSR framework, which is Nextjs and use all my experiences and best practices which fits Nextjs features and abilities to make a structured, robust and maintanable basement for SSR projects.

I personally used this boilerplate for several enterprise web-applications and it's completely tested and you can rest assured to use it safely.

Note: I'll be happy to get your issues and problems or any other opinion to make it better together. To know how to contribute please visite the CONTRIBUTE.md file.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

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

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Description
Nextjs boilerplate based on clean architecture
Readme 1.7 MiB
Languages
TypeScript 86.2%
JavaScript 9.5%
Dockerfile 2.4%
CSS 1.9%