CI/CD Pipeline in Next.js 14 with Github Actions using Eslint Prettier Pre-commit | Deploy on Heroku

In this video, we will be constructing a robust CI/CD pipeline in next.js 14 project from scratch. This video is your go-to resource for integrating GitHub Actions into your development workflow, ensuring your codebase remains clean and efficient with ESLint, and beautifully formatted with Prettier. We'll also dive into the power of pre-commit hooks to catch issues early. But that's not all - we'll cap off the tutorial by showing you how to seamlessly deploy your app to Heroku through github workflows. Whether you're looking to enhance your dev ops skills or streamline your project's production pipeline, this tutorial has everything you need.
00:05 Overview on CI/CD in next.js 14
02:10 Learn Next.js 14+ tutorials
04:05 Create new next.js 14+ project
06:25 Install required npm packages
09:15 Add eslint rules
11:55 Add prettier rules
13:10 Add lint and format scripts in package.json
17:50 Add husky pre-commit hooks and test
24:10 Add commit message format config
26:55 Add rules for commitlint and test
31:30 Configure CI for next.js 14+ project
38:05 Test CI configs using GitHub actions
41:20 Configure CD for next.js 14+ project
45:50 Configure heroku for deployment
48:40 Add heroku secrets in GitHub repo
50:50 Test CD configs for deployment on heroku
54:00 More on heroku dashboard
55:10 Outro
#nextjs14 #cicd #githubactions #heroku #continuousdeployment #continuousintegration #devop
Follow Whatsapp Channel:
whatsapp.com/channel/0029Va7y...
React tutorials:
• React.js Tutorials
JavaScript Tutorials and Projects:
• JavaScript Tutorial an...
Angular Tutorials:
• Angular 16 Life Cycle ...
Docker Tutorials & CI/CD:
• Docker Tutorials & CI/CD
Angular 16 Crash Course For Beginners:
• Angular 16 Crash Course
Tech Tutorials - Random:
• Postman Tutorial - Tes...
Complete Next.js 13 Tutorials: • Next.js 13 Tutorials -...
Next.js 14 Tutorials:
• Next.js 14 Tutorials -...
Node Express MongoDB Bootcamp: • Build REST API with No...
ChatGPT Tutorials: • ChatGPT
Join our facebook group:
/ 996305460498149
Contact us for development services:
/ umair-jameel-24aa5368
Repo Link:
github.com/umairjameel321/nex...

Пікірлер: 5

  • @marouanelhaddad8632
    @marouanelhaddad86326 ай бұрын

    Finally! This is so great! 😁

  • @user-rf7ye1ne9l
    @user-rf7ye1ne9l27 күн бұрын

    nice video is is the same if we deploy it on cPanel

  • @prashlovessamosa
    @prashlovessamosa6 ай бұрын

    Thanks sir.

  • @ichigokuro3986
    @ichigokuro39866 ай бұрын

    Can you make a tutorial replacing commit lint with commit zen

  • @shahidhabib88
    @shahidhabib886 ай бұрын

    👍