Hi everyone 👋
I’m Kelvyn, a Frontend Engineer with 8 years of experience, mainly working with React.
In this series, I’ll walk you through how to set up a comprehensive GitLab CI/CD pipeline for a Next.js application, based on real-world production experience.
Who is this article for?
This article is best suited for engineers with 5+ years of experience who want to deep dive into how a modern application is built, tested, and deployed in a structured and scalable way.
It will be much easier to follow if you already have some basic knowledge of:
- GitLab CI/CD: GitLab Runner, executors (Shell, Docker), cache, artifacts, container/package registry, templates, components
- Docker: Docker daemon, Docker Compose, Docker Buildx
- Linux: Ubuntu, AMD64 architecture, CLI, Shell, Vim, SSH
- YAML:
What we’ll do in Part 0
In this first part, we’ll focus on:
- Initialize repository
- Initialize our Next.js application
I. Initialize repository
To get started, create a new GitLab group:
https://gitlab.com/groups/new#create-group-pane
Next, create a blank project named nextjs-cicd-template inside the group.
From the default main branch, create the following branches:
- master
- staging
- develop
II. Initialize the Next.js application**
Initialize a fresh Next.js app inside the project directory:
cd nextjs-cicd-template
pnpm create next-app@latest ./ --yes
Next, add a TypeScript type-checking script to your package.json:
"check-types": "tsc --noEmit"
Finally, verify that linting and type checking work as expected:
pnpm lint && pnpm check-types
If both commands pass, we’re ready to move on and integrate these checks into our GitLab CI pipeline.
Remember generate pnpm-lockfile.yaml in order to use at step setup job on Gitlab CI/CD
What’s next?
In Part 1, we’ll set up:
Linting & type-checking jobs
PNPM store caching
GitLab Dependency Proxy
Secure and repeatable validation pipelines
*Full source code: *
https://gitlab.com/kelvyn-labs/nextjs-cicd-template
Top comments (1)
great article!