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:
https://whatsapp.com/channel/0029Va7yDtdKmCPVHT30ya3A

React tutorials:
https://www.youtube.com/playlist?list=PL3i9po_eXL_ry_n5DZ30aEHazNCWdOUz7

JavaScript Tutorials and Projects:
https://www.youtube.com/playlist?list=PL3i9po_eXL_rwqWg1yPGBFKFZWqjaCTZe

Angular Tutorials:
https://www.youtube.com/watch?v=Qts7H8P-FpI&list=PL3i9po_eXL_qZ4PNvMUcHBERa2m9QRFo1&pp=gAQBiAQB

Docker Tutorials & CI/CD:
https://www.youtube.com/playlist?list=PL3i9po_eXL_rej_oo1FyL3D7q1AewarfJ

Angular 16 Crash Course For Beginners:
https://www.youtube.com/playlist?list=PL3i9po_eXL_orh8YJcdGNO0C6P2mHABT7

Tech Tutorials - Random:
https://www.youtube.com/watch?v=IYRrE-yikb0&list=PL3i9po_eXL_pKCqB5J5KoRdR-4uebo1r-

Complete Next.js 13 Tutorials: https://www.youtube.com/playlist?list=PL3i9po_eXL_paQQIa4qTum7_9CPqQwiFH

Next.js 14 Tutorials:
https://www.youtube.com/playlist?list=PL3i9po_eXL_pyNKBtAAK_gVBWG5d8yZS9

Node Express MongoDB Bootcamp: https://www.youtube.com/playlist?list=PL3i9po_eXL_rdDdgVHSZjmzvwUB-jj8SU

ChatGPT Tutorials: https://www.youtube.com/playlist?list=PL3i9po_eXL_qtCoSV1GHX_5Q48D2La9xW

Join our facebook group:
https://www.facebook.com/groups/996305460498149/

Contact us for development services:
https://www.linkedin.com/in/umair-jameel-24aa5368/

Repo Link:
https://github.com/umairjameel321/nextjs14-ci-cd

Видео CI/CD Pipeline in Next.js 14 with Github Actions using Eslint Prettier Pre-commit | Deploy on Heroku канала Programming with Umair