Next.js Szumplate

Hello there !!!

This is Next.js Szumplate, an open source template for enterprise projects! It is packed with features that will help you create an efficient, maintainable and enjoyable application. This template will save you a lot of time, so sit back, relax and get ready to conquer the whole world with your new awesome app! 🚀

📚 Features

This template has all the incredible you need:

• 🏎️ Next.js - Fast by default, with config optimized for performance
• 💅 Tailwind CSS - A utility-first CSS framework
• 💻 T3 Env - Manage your environment variables with ease
• ✨ ESlint and Prettier - For clean, consistent, and error-free code
• 🛠️ Extremely strict TypeScript - With ts-reset library for ultimate type safety
• 📊 Bundle analyzer plugin - Keep an eye on your bundle size
• 🧪 Vitest and React Testing Library - For rock-solid and highly speed unit and integration tests
• 🎭 Playwright - Write end-to-end tests like a pro
• 🎯 Absolute imports - No more spaghetti imports
• ⚕️ Health checks - Kubernetes-compatible for robust deployments
• 🤖 Dependabot - Auto-checking dependencies, Dependabot will do it for you
• 🚢 Semantic Release - Fully configured tool for changelog, versioning and releasing app 😮
• 🚀 GitHub Actions - Pre-configured actions for smooth workflows, including code review, PRs checks (test, e2e, Prettier, ESlint, and more...) and app releasing
• 🤖🧠 Automated ChatGPT Code Reviews - Stay on the cutting edge with AI-powered code reviews!
• 💯 Perfect Lighthouse score - Because performance matters

Table of Contents

• Next.js Szumplate
  • 📚 Features
  • 📖 Table of Contents
  • 🎯 Getting Started
  • 🚀 Deployment
  • 📃 Scripts Overview
  • 🧪 Testing
    • Running Tests
  • 🎨 Styling and Design System
  • 🤖 ChatGPT Code Review
  • 💻 Environment Variables handling
  • 🚀 Github Actions
  • 🔒 Keeping Server-only Code out of the Client Environment
  • 📜 License

🎯 Getting Started

To get started with this boilerplate, follow these steps:

1. Fork & clone repository:

## Don't forget to ⭐ star and fork it first :)
git clone https://github.com/<your_username)/nextjs-szumplate.git

2. Install the dependencies:

npm ci

3. Prepare project:

• To use fully configured Semantic Release feature, go to ~/.github/workflows/publish.yml file, then expose hidden code (lines from 26 to 30). After that you can enjoy all semantic-release and sharable configuration features (more details HERE).
• Add the OPENAI_API_KEY to your github actions secrets.

4. Run the development server:

npm run dev

5. 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.

🚀 Deployment

Easily deploy your Next.js app with Vercel by clicking the button below:

📃 Scripts Overview

The following scripts are available in the package.json:

• analyze: Analyzes the bundle sizes for Client, Server and Edge environments
• build: Builds the app for production
• dev: Starts the development server
• e2e: Runs end-to-end tests
• e2e:ci: Runs end-to-end tests for CI
• e2e:ui: Runs end-to-end tests with UI
• lint: Lints the code using ESLint
• lint:ci: Lints the code using ESLint for CI - considers warnings as errors
• lint:fix: Automatically fixes linting errors
• prettier:check: Checks the code for proper formatting
• prettier:fix: Automatically fixes formatting issues
• start: Starts the production server
• test: Runs unit and integration tests
• test:coverage: Runs and returns tests coverage report of unit and integration tests
• test:watch: Runs unit and integration tests in watch mode
• type-check: Runs types check

🧪 Testing

This szumplate comes with various testing setups to ensure your application's reliability and robustness.

Running Tests

• Unit and integration tests: Run Vitest tests using npm run test
• End-to-end tests: Run Playwright tests with npm run e2e
• End-to-end tests (UI mode): Run Playwright tests with UI using npm run e2e:ui

🎨 Styling and Design System

This boilerplate uses Tailwind CSS for styling and Szum-Tech Design System, which contains fully designed components, color palette, utils and more... (Check DOCS)

🤖 ChatGPT Code Review

We've integrated the innovative ChatGPT Code Review for AI-powered, automated code reviews. This feature provides real-time feedback on your code, helping improve code quality and catch potential issues.

To use ChatGPT Code Review, add an OPENAI_API_KEY environment variable with an appropriate key from the OpenAI platform. For setup details, refer to the Using GitHub Actions section in the documentation.

💻 Environment Variables handling

T3 Env is a library that provides environmental variables checking at build time, type validation and transforming. It ensures that your application is using the correct environment variables and their values are of the expected type. You’ll never again struggle with runtime errors caused by incorrect environment variable usage.

Config file is located at env.js. Simply set your client and server variables and import env from any file in your project.

const env = createEnv({
  server: {
    // Server variables
    SECRET_KEY: z.string()
  },
  client: {
    // Client variables
    API_URL: z.string().url()
  },
  runtimeEnv: {
    // Assign runtime variables
    SECRET_KEY: process.env.SECRET_KEY,
    API_URL: process.env.NEXT_PUBLIC_API_URL
  }
});

---

If the required environment variables are not set, you'll get an error message:

  ❌ Invalid environment variables: { SECRET_KEY: [ 'Required' ] }

🚀 Github Actions

Github Actions offer multiple smooth workflows that make development easier and reduce the developer's impact on repetitive and boring tasks.

Code Review 🤖Flow

For more details, check paragraph 🤖 ChatGPT Code Review.

Code of this workflow, you can find in code-review.yml file.

PR Checks ✅ Flow

This action is used only during pull request life, it validates the added code in terms of its correctness, preventing the merge of incorrect code.

Checks the code for:

• Build 🏗
• Prettier 🧹
• Eslint ⬣
• TypeScript 🛠️
• Test 🧪
• Playwright 🎭 (e2e tests)

Code of this workflow, you can find in pr-check.yml file.

Publish 📦🚀

The action is triggered when a changes are added to the main branch main. It uses the Semantic Release library. Based on the Conventional Commits, it determines the next version of the application, boosts it in the package.json file, adds information to the CHANGELOG.md file and creates a new release on Github.

The configuration used in Szumplate comes from the package @szum-tech/semantic-release-preset, which contains the shareable configurations used by the Semantic Release.

Let's see configuration used in this Repository.

Code of this workflow, you can find in publish.yml file.

🔒 Keeping Server-only Code out of the Client Environment

Since JavaScript modules can be shared between both Server and Client Components modules, it's possible for code that was only ever intended to be run on the server to sneak its way into the client. To prevent this sort of unintended client usage of server code, we can use the server-only package to give other developers a build-time error if they ever accidentally import one of these modules into a Client Component.

Then import the package into any module that contains server-only code:

import "server-only";

// The rest of server only code

The corresponding package client-only can be used to mark modules that contain client-only code – for example, code that accesses the window object.

📜 License

This project is licensed under the MIT License. For more information, see the LICENSE file.