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! ๐
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
- Next.js Szumplate
To get started with this boilerplate, follow these steps:
## Don't forget to โญ star and fork it first :)
git clone https://github.com/<your_username)/nextjs-szumplate.git
npm ci
- 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.
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.
Easily deploy your Next.js app with Vercel by clicking the button below:
The following scripts are available in the package.json
:
analyze
: Analyzes the bundle sizes for Client, Server and Edge environmentsbuild
: Builds the app for productiondev
: Starts the development servere2e
: Runs end-to-end testse2e:ci
: Runs end-to-end tests for CIe2e:ui
: Runs end-to-end tests with UIlint
: Lints the code using ESLintlint:ci
: Lints the code using ESLint for CI - considers warnings as errorslint:fix
: Automatically fixes linting errorsprettier:check
: Checks the code for proper formattingprettier:fix
: Automatically fixes formatting issuesstart
: Starts the production servertest
: Runs unit and integration teststest:coverage
: Runs and returns tests coverage report of unit and integration teststest:watch
: Runs unit and integration tests in watch modetype-check
: Runs types check
This szumplate comes with various testing setups to ensure your application's reliability and robustness.
- 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
![image](https://private-user-images.githubusercontent.com/29024606/261841631-9c65cdd2-4e04-4687-81d6-8e7a32f12518.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNTg5NjYsIm5iZiI6MTcyNjE1ODY2NiwicGF0aCI6Ii8yOTAyNDYwNi8yNjE4NDE2MzEtOWM2NWNkZDItNGUwNC00Njg3LTgxZDYtOGU3YTMyZjEyNTE4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDE2MzEwNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTYwNzA1YzIzMWM0ZWZiZGI2MGI3YzYyMzdhZWYzYTYyNGZmOGE3NzE4OTZjNzY1MjM3N2JkZjU3YjQzNTM1NmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.wUWiH20aYKB4iRKDjZHPryvTgwedkezIcyo7Q8IfMrM)
This boilerplate uses Tailwind CSS for styling and Szum-Tech Design System, which contains fully designed components, color palette, utils and more... (Check DOCS)
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.
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 offer multiple smooth workflows that make development easier and reduce the developer's impact on repetitive and boring tasks.
For more details, check paragraph ๐ค ChatGPT Code Review.
Code of this workflow, you can find in
code-review.yml
file.
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)
![image](https://private-user-images.githubusercontent.com/29024606/261841671-755e0ce7-3a20-4860-b7c6-adbdedc954d4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNTg5NjYsIm5iZiI6MTcyNjE1ODY2NiwicGF0aCI6Ii8yOTAyNDYwNi8yNjE4NDE2NzEtNzU1ZTBjZTctM2EyMC00ODYwLWI3YzYtYWRiZGVkYzk1NGQ0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDE2MzEwNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYxOTRmNWRjOTNjNDI2ZTFlNDdmZjM0YTQ4YmZkY2FlZDZmNTE5MTkyNDAwZjAyNjQ1MjgzODg4YmEwY2Q5ZGEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.hK-tTOv_CBVoKrQaXWQEcPKtUlDz-6wJWzjwgQ0BsWQ)
Code of this workflow, you can find in
pr-check.yml
file.
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.
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.
This project is licensed under the MIT License. For more information, see the LICENSE file.