Codr Kai
Codr Kai
  • 58
  • 340 716
NextJS 14 - How To Deploy Your App To AWS Amplify or Vercel
In this final tutorial series for learning how to program using Next JS 14 App Router, I will show you how to deploy your app to AWS Amplify and Vercel. These are two of the most popular hosting platforms that supports Next JS.
The app I am using in this tutorial is a Todo List that has Next-Auth Authentication and a Supabase Database.
Full Source Codes available on my Patreon:
www.patreon.com/codrkai
Please Like and Subscribe so you can see more future tutorial videos.
Time Markers
00:00 - Demo
01:41 - AWS Amplify
12:32 - Vercel
17:27 - Final Thoughts
#nextjs #awsamplify #vercel
มุมมอง: 1 032

วีดีโอ

NextJS 14 - Authentication using Next Auth / Auth.js [Complete Guide]
มุมมอง 2K3 หลายเดือนก่อน
This is the complete guide to Authentication in Next JS 14 App Router using Next Auth, also known as Auth.js. This easy guide will step you through authenticating using Social Media accounts such as Github and Google, or creating your own Custom Login Page. Auth uses Sessions, JWT, Sign In with Github, Google, or Credentials. Time Stamps 00:00 - APP DEMO 00:28 - SETUP 03:04 - SIGN IN USING SOCI...
NextJS 14 - How to use Postgres Database, SUPABASE, NEON TECH, VERCEL
มุมมอง 4503 หลายเดือนก่อน
This Next JS App Router Tutorial will show you how to connect to POSTGRES databases, specifically SUPABASE, NEON, and VERCEL. I built a simple Dashboard admin to show how to select, insert, and delete database items. Full source codes can be found at my Patreon: patreon.com/codrkai Time Markers 00:00 - Intro 00:20 - Neon Tech 08:14 - Vercel 11:01 - Supabase 13:50 - Dashboard using Supabase #rea...
NextJS 14 - State Management with COOKIES, REDUX, ZUSTAND
มุมมอง 1.1K4 หลายเดือนก่อน
Here are 3 popular ways to access global variables on your Next JS app. These are also referred as State Management, Sessions, or Maintaining Global Variables that can then be accesses on any page of your application. I will show how to code Cookies, Redux, and Zustand in the Next JS App Router. Full Downloadable Code patreon.com/codrkai Socials beacons.ai/codrkai Time Stamps 00:00 - INTRO 00:4...
NextJS 14 - Passing Data to Pages and Components
มุมมอง 4.4K4 หลายเดือนก่อน
This Next JS App Router Tutorial will show you how to pass data to other pages and components. Data is passed by Parameters, and by the useContext and createContext features in Next JS. I also show how to pass URL parameters to pages. Stay until the end of the video to not miss out on anything important. Full source codes can be found at my Patreon: patreon.com/codrkai Thank you to my new Patre...
NextJS 14 - How to Submit FORM DATA using UseFormState
มุมมอง 5K5 หลายเดือนก่อน
Next JS 14 Tutorial on how to submit Form Data using various methods such as, useFormState, useState, send form data to server API, saving the form data to a cloud database, and more. Full code download is provided in my Patreon. patreon.com/codrkai Time Markers 00:00 - Basic Form Submit 04:19 - Submit Data to Server API 10:29 - Use Form State 13:27 - Use Form Status 14:40 - Advanced Form Setup...
Is CHAT GPT Better than CODING TUTORIALS?
มุมมอง 1186 หลายเดือนก่อน
Comparing my coding tutorials with Chat GPT and Google Gemini. Watch until the end. Support this channel by joining my Patreon, or simply Like this video :) patreon.com/codrkai Socials and Links beacons.ai/codrkai My Camera Filming Setup Sony a7c II Full Frame Camera: amzn.to/49FQxFk Sony 14mm f/1.8 GM Lens: amzn.to/48olexS Rode VideoMicro Microphone: amzn.to/3wsYb7J
NextJS 14 - How to FETCH DATA, SERVER API Routes
มุมมอง 16K6 หลายเดือนก่อน
This Next JS 14 Tutorial will show you how to fetch data from an external website, or how to fetch data from your own server. To fetch data from the server, I will create a Server API to post JSON data. Video Time Markers 00:00 - Fetching Data 03:32 - Server API 06:20 - Pass Params to Server API 10:56 - Dynamic Server API 13:46 - POST data to Server API To download the full code in this video, ...
NextJS 14 - Install, Setup, Understanding Next JS 14 App Router
มุมมอง 1.7K6 หลายเดือนก่อน
This tutorial will step you through how to install and setup Next JS. You will learn how to use the App Router and it's basics. Full code downloads patreon.com/codrkai Time Markers 00:00 - Installing Node using Homebrew 01:55 - Create NextJS App 07:33 - App Router Layout 19:48 - My Custom App Setup 27:56 - Tips and Tricks Make sure to watch the previous video NextJS 14 - Top 5 Things To Know th...
NextJS 14 - Top 5 Things YOU NEED To Learn
มุมมอง 3937 หลายเดือนก่อน
I compiled together a list of the Top 5 Things you need to learn with Next JS version 14 using the App Router. Full source code is in my Patreon patreon.com/codrkai Jump To A Topic... 0:00 - Layouts 4:37 - Grouping 9:56 - Suspense 13:33 - Parallel Routes 20:22 - Intercepting Routes Please Like this video if joining my Patreon is not possible. It will help to support this channel with future tut...
How It's Going With Creating My Business Website In NextJS | Problems and Issues
มุมมอง 6167 หลายเดือนก่อน
I've been hard at work creating a website that revolves around a business I'm creating, and I decided to create it using Next JS. In this video, I'll go over problems and issues I've ran into, as well as give an update on my coding, software, and 2023 Macbook Pro that I'm using for programming. beacons.ai/codrkai #coding #nextjs #webdevelopment
He Stole 41.5 MILLION So They Taught Him a Lesson
มุมมอง 11311 หลายเดือนก่อน
This is the story of 24 year old Aiden Pleterski from Canada, a self proclaimed Crypto King, who stole 41.5 million from investors and soon after they kidnapped and tortured him for days. For full information on this case, you can visit the site: aiden-pleterski (dot com) To support this channel with more stories like these, please Like this video and Subscribe.
How to Connect the Macbook M2 Pro to Multiple Monitors
มุมมอง 33Kปีที่แล้ว
This is how I connected two monitors to my 2023 Macbook M2 Pro. See below for links to the adaptors and everything on my desktop. HDMI to USB-C Adaptor: amzn.to/3QPnRDK codrkai github.com/codrkai beacons.ai/codrkai iMac: 21.5 inch 2012 Fusion Macbook M2 Pro: 32GB Memory, 1TB Storage Monitor (LG 27GL850): amzn.to/44didP8 Ann Pro 2 Mechanical Keyboard: amzn.to/43lnlkF Japanese Style...
I bought the 14" Macbook M2 Pro for Coding and Video Editing, Here Are My Thoughts
มุมมอง 2Kปีที่แล้ว
My thoughts on the new 14 inch Macbook M2 Pro. I am a full stack programmer and I also edit videos in 4K. Was this Macbook Pro M2 the right choice? Stay until the end of the video to hear about how I saved money on buying my Macbook M2 Pro. 14" Macbook Pro in Space Gray M2 Pro chip with 12-core CPU 32GB Memory 1TB SSD Storage codrkai github.com/codrkai beacons.ai/codrkai iMac: 21....
Reacting to ChatGPT AI Bot Making a Sales Phone Call to a Human - Air AI
มุมมอง 611ปีที่แล้ว
I saw a video circulating about a ChatGPT AI Bot with a human like voice making a sales phone call to book a Tesla test drive with a real human on the phone. Here is my reaction to the video. You can search for "air ai" if you wish to learn more and watch the full video. Help me reach my SUB goals, and by liking this video. IG @codrkai github.com/codrkai beacons.ai/codrkai My Desk Setup: iMac: ...
How I Would Learn Programming In 2023 If I Had To Start Over
มุมมอง 354ปีที่แล้ว
How I Would Learn Programming In 2023 If I Had To Start Over
Installing New Keycaps on my Ann Pro 2 Mechanical Keyboard
มุมมอง 173ปีที่แล้ว
Installing New Keycaps on my Ann Pro 2 Mechanical Keyboard
A Day in the life of a Software Engineer (not in NYC)
มุมมอง 454ปีที่แล้ว
A Day in the life of a Software Engineer (not in NYC)
Building my first online startup (not in NYC)
มุมมอง 646ปีที่แล้ว
Building my first online startup (not in NYC)
Coding a Astrology Horoscope App Using Next JS with Tailwaind CSS - ASMR Programming, No Talking
มุมมอง 1.2Kปีที่แล้ว
Coding a Astrology Horoscope App Using Next JS with Tailwaind CSS - ASMR Programming, No Talking
Coding a Netflix Clone but with Movie Theater Showings - ASMR Programming, No Talking, NextJS
มุมมอง 232ปีที่แล้ว
Coding a Netflix Clone but with Movie Theater Showings - ASMR Programming, No Talking, NextJS
Coding a Todo List Using NextJS with TailwindCSS - ASMR Programming, No Talking
มุมมอง 3Kปีที่แล้ว
Coding a Todo List Using NextJS with TailwindCSS - ASMR Programming, No Talking
Building A Weather App [ASMR Programming] No Talking: Next JS, Tailwind CSS, and Mechanical Keyboard
มุมมอง 1.1Kปีที่แล้ว
Building A Weather App [ASMR Programming] No Talking: Next JS, Tailwind CSS, and Mechanical Keyboard
React JS Tutorial [2023]: Connect to Database using MongoDB Cloud
มุมมอง 14Kปีที่แล้ว
React JS Tutorial [2023]: Connect to Database using MongoDB Cloud
React JS Tutorial [2023]: Backend Server Setup Using NodeJS and Express
มุมมอง 18Kปีที่แล้ว
React JS Tutorial [2023]: Backend Server Setup Using NodeJS and Express
React JS Tutorial [2023]: Create Forms Using Hooks, useState, useEffect, and Fetch
มุมมอง 3.5Kปีที่แล้ว
React JS Tutorial [2023]: Create Forms Using Hooks, useState, useEffect, and Fetch
React JS Tutorial [2023]: How to pass data between pages - Params, Props, and Context
มุมมอง 15Kปีที่แล้ว
React JS Tutorial [2023]: How to pass data between pages - Params, Props, and Context
React JS Tutorial [2023]: URL Page Routing, Outlet, and Layouts
มุมมอง 9Kปีที่แล้ว
React JS Tutorial [2023]: URL Page Routing, Outlet, and Layouts
React JS Tutorial [2023]: Syntax, JSX, and What You Need To Know
มุมมอง 2Kปีที่แล้ว
React JS Tutorial [2023]: Syntax, JSX, and What You Need To Know
React JS Tutorial [2023]: How to Install ReactJS, Setup, and Overview
มุมมอง 2.7Kปีที่แล้ว
React JS Tutorial [2023]: How to Install ReactJS, Setup, and Overview

ความคิดเห็น

  • @piyush9912
    @piyush9912 7 วันที่ผ่านมา

    Commenting to support. Keep up the good work

  • @liamkelly4893
    @liamkelly4893 12 วันที่ผ่านมา

    Most underrated channel I've seen, tutorials are so clear and simple yet detailed. Thank you!

  • @redzninja8749
    @redzninja8749 13 วันที่ผ่านมา

    does the "use client" in wrapper component make the whole page not ssr friendly?

  • @farzad5128
    @farzad5128 13 วันที่ผ่านมา

    lol, now main issue is how to get data from db in js file :)) u used static json array

  • @game_space111
    @game_space111 20 วันที่ผ่านมา

    thanks man

  • @putujojo1968
    @putujojo1968 21 วันที่ผ่านมา

    Is NEXT_PUBLIC_ENV working well on the client side?

  • @fantasyacesofficial
    @fantasyacesofficial 22 วันที่ผ่านมา

    Sent you a dm on instagram.

  • @melkhywong7594
    @melkhywong7594 หลายเดือนก่อน

    hi. can i use your method to set cookies for value of cart id?

  • @irule10338
    @irule10338 หลายเดือนก่อน

    Fetching to an outside url, in your example dummy.json/products didnt work for me :(

  • @ashwinmanghat4416
    @ashwinmanghat4416 หลายเดือนก่อน

    But doesn't it mean that the slugs are open and accessible to anyone?

  • @em.naturalnie
    @em.naturalnie หลายเดือนก่อน

    I have a question what microphone do you use? Thanks!

    • @codrkai
      @codrkai หลายเดือนก่อน

      For this video, I'm just using a lavalier mic with a windscreen on it 😊 My new videos I've been using the DJI Mic 2 and I highly recommend it.

  • @sian4d
    @sian4d หลายเดือนก่อน

    Mil gracias

  • @AndresMartinez-se9zl
    @AndresMartinez-se9zl หลายเดือนก่อน

    Hey, what is the difference between router handlers and api routes, and which one can i use in a next js 14 app?

    • @codrkai
      @codrkai หลายเดือนก่อน

      This is part of the Next JS 14 tutorial series. Check out the first video which goes through all the basics 🙌

  • @christophernolan8761
    @christophernolan8761 หลายเดือนก่อน

    Awesome. thanks v much

  • @jr.rasentertainment4074
    @jr.rasentertainment4074 หลายเดือนก่อน

    Thank you so much for sharing this information, I am about to launch my website but I need this for my Merchandise. Watching all the way from Vanuatu

  • @prashlovessamosa
    @prashlovessamosa 2 หลายเดือนก่อน

    Great

    • @codrkai
      @codrkai 2 หลายเดือนก่อน

      🙌

  • @sp_watersweep
    @sp_watersweep 2 หลายเดือนก่อน

    13:57 Commenting Timestamp for notes.

    • @codrkai
      @codrkai หลายเดือนก่อน

      I've never thought of this. Nice 🙌🙌

  • @BrendonGruis
    @BrendonGruis 2 หลายเดือนก่อน

    I really like the straightforward nature of this tutorial. Way to stay on task and show how to do the thing concisely.

  • @0thi123
    @0thi123 2 หลายเดือนก่อน

    Nice video but when i create my own custom api route a POST route amplify throws error 500, please how do i resolve this

    • @codrkai
      @codrkai หลายเดือนก่อน

      Join my Patreon and download the code for no errors lol 🔥 also, figuring out bugs will make you a better programmer 🙌🙌

  • @christophernolan8761
    @christophernolan8761 2 หลายเดือนก่อน

    u should have your own paid channel. it is that good

    • @codrkai
      @codrkai 2 หลายเดือนก่อน

      Glad you're loving it 👊 ps. Love your movies. Especially Inception 🙌😂

  • @Tomatechs558
    @Tomatechs558 2 หลายเดือนก่อน

    Thanks, I like your content happy coding, where can I find the previous video?

    • @codrkai
      @codrkai หลายเดือนก่อน

      I've separated these into their own playlists with React, Next JS, Python etc. They should be in order. I tend to label everything with their respective names like React JS or Next JS. Hope it helps 🙌

  • @lunchboxUFX
    @lunchboxUFX 2 หลายเดือนก่อน

    I'm used to separating the BE in its own directory but have it still use the original package.json at root, here you init one inside the backend dir - is there a specific programmatic reason for doing this, or does this just keep things organized?

    • @codrkai
      @codrkai หลายเดือนก่อน

      I actually recommend separating them in their own folders. I think I show this in the next tutorial or something lol. I have seen others do this, but I do think it's more clean to have the BE and FE in their own 🙌

    • @lunchboxUFX
      @lunchboxUFX หลายเดือนก่อน

      ​@@codrkai actually i thought about it more and i'm like duh, prob nice to keep dependencies separate. Aint nobody using jquery slider on the server

  • @Jo-xt5eq
    @Jo-xt5eq 2 หลายเดือนก่อน

    Really helpfull ;) thanks

  • @EasyLiss
    @EasyLiss 2 หลายเดือนก่อน

    Finally what I’ve been looking for! Thanks for the wonderful info!!!

  • @prashlovessamosa
    @prashlovessamosa 3 หลายเดือนก่อน

    Great thanks for sharing

  • @cheftimbob
    @cheftimbob 3 หลายเดือนก่อน

    Awesome content as always Kai!

  • @chuuuuuuuuucu
    @chuuuuuuuuucu 3 หลายเดือนก่อน

    thanks!

  • @eliasshemsu5853
    @eliasshemsu5853 3 หลายเดือนก่อน

    This is a great video. Thanks a lot!

  • @dreadnaught9226
    @dreadnaught9226 3 หลายเดือนก่อน

    Thank you so much for the amazing tutorial. Could you kindly may be in a future video show us how we can use the cookies to log in the user if the cookies haven't yet expired instead of calling the sign in form client component. Again, amazing work.

    • @codrkai
      @codrkai 3 หลายเดือนก่อน

      I have an upcoming tutorial using next-auth. Hopefully it'll answer the sign in and expiration questions 😬👊

  • @unrullEE
    @unrullEE 3 หลายเดือนก่อน

    Idk why they don’t update the docs. But great tutorial

    • @codrkai
      @codrkai 3 หลายเดือนก่อน

      If you go to the NextJS website, make sure to select the "App Router" from the upper left dropdown to see the new docs 👊

  • @dreadnaught9226
    @dreadnaught9226 3 หลายเดือนก่อน

    I love the tutorial, can't help but feel cheated that in less than 30 minutes, you've accomplished what I couldn't in a week. Thank you, G.

    • @codrkai
      @codrkai 3 หลายเดือนก่อน

      We've all been there. It gets faster over time 🔥

  • @rajithprabhakaran
    @rajithprabhakaran 3 หลายเดือนก่อน

    Wonderful session! Quite a lot of take away from this session. Keep up your good work! I spent some evenings, it's worth spending that much time. Thanks. NB: There are few changes in the syntax, now and then, due to update in the versions.

    • @codrkai
      @codrkai 3 หลายเดือนก่อน

      I plan on making an updated tutorial soon with React 19 🙌

  • @christophernolan8761
    @christophernolan8761 3 หลายเดือนก่อน

    really terrific. You are a very good instructor. 1 question: in the client, does each page run its own axios fetch code on the page (or is that code separated out like a component)? Thanks again for the really helpful videos on React.

  • @MelinaMusakhani
    @MelinaMusakhani 3 หลายเดือนก่อน

    terrible

  • @blabla-kk8bl
    @blabla-kk8bl 3 หลายเดือนก่อน

    bro can you make a todo app with next js with external api fetch , typescript would be more related if you can.

  • @blabla-kk8bl
    @blabla-kk8bl 4 หลายเดือนก่อน

    bro you are a gold.

    • @codrkai
      @codrkai หลายเดือนก่อน

      My viewers like you are gold ✨🙌

  • @christophernolan8761
    @christophernolan8761 4 หลายเดือนก่อน

    Would the Axios code normally be in the same file as the form?

  • @DragonW3rrior94
    @DragonW3rrior94 4 หลายเดือนก่อน

    Hey why do i get the error useFormStatus is not defined? I am also using nextjs14 and react 18 and react-dom 18

  • @lowkey5583
    @lowkey5583 4 หลายเดือนก่อน

    thanks for theses valuable infromations

  • @ChristiaHall
    @ChristiaHall 4 หลายเดือนก่อน

    Hmm, interesting. I have a 2022 macbook pro M2 13 inch and can only connect one monitor out of the box. I don't have an HDMI port on the right side though. Your buddy must have been talking about one like mine.

    • @tonyaclark1980
      @tonyaclark1980 2 หลายเดือนก่อน

      ME too I don't know how to connect dual monitor and have two monitors

  • @christophernolan8761
    @christophernolan8761 4 หลายเดือนก่อน

    could u pls add this code to your Github repository

  • @christophernolan8761
    @christophernolan8761 4 หลายเดือนก่อน

    I though u need to import react for each component page, but u don't and it works. Why is that?

  • @piratkm2241
    @piratkm2241 4 หลายเดือนก่อน

    I really appreciate your help in understanding the correct way to use Next.JS 14. It's a concept I've been struggling with for a long time, but you've made it much easier to grasp. Thank you.

  • @ordinarycoder1010
    @ordinarycoder1010 4 หลายเดือนก่อน

    Hi, Kai, Your video was nice ,but if you fetch your own api route in the server component it will give you "SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at JSON.parse (<anonymous>) at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19) at successSteps (node:internal/deps/undici/undici:5300:27) at fullyReadBody (node:internal/deps/undici/undici:1447:9) at async specConsumeBody (node:internal/deps/undici/undici:5309:7)" in the production when you deploy in the vercel. I am also facing the same problem , I dont know how to solve it , can make a video on it

  • @user-ge7zh3mk6s
    @user-ge7zh3mk6s 4 หลายเดือนก่อน

    some people used to set GET(req,res), if you use "res" in it you CAN NOT use {params} too, you'll probably get and error!(params is undefined)

  • @user-ge7zh3mk6s
    @user-ge7zh3mk6s 4 หลายเดือนก่อน

    some people used to set GET(req,res), if you use "res" in it you CAN NOT use {params} too, you'll probably get and error!(params is undefined)

  • @danielchukwu524
    @danielchukwu524 4 หลายเดือนก่อน

    Love the intro 💪

  • @HimanshuSingh-qf6ri
    @HimanshuSingh-qf6ri 4 หลายเดือนก่อน

    Use typescript

  • @MallBrawl
    @MallBrawl 4 หลายเดือนก่อน

    It's a fantastic tutorial. There are almost no other about this data passing stuff. However, i still have a doubt. Which way(s) do I have to like SET (instead of get) data, so I can fetch it later from another page like you did from the API you created?. Cuz I'm working on a bus tickets vending website, and i need to set or store data from a Form, and then use that data on various pages afterwards. In this case you already got the data from an external source, but what if the data is generated from the user through the website itself?. I only found tutorials about using Cookies and that sort of stuff but idk maybe there is a better/more used way to do what I need. So again, a fantastic video pal!

  • @MulagatMongoAtlas
    @MulagatMongoAtlas 4 หลายเดือนก่อน

    thank you very very much, God bless