![Codr Kai](/img/default-banner.jpg)
- 58
- 340 716
Codr Kai
United States
เข้าร่วมเมื่อ 28 ก.ค. 2019
I like to code
All socials @codrkai
IG/codrkai
Patreon/codrkai
Github/codrkai
Beacons/codrkai
All socials @codrkai
IG/codrkai
Patreon/codrkai
Github/codrkai
Beacons/codrkai
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
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
Commenting to support. Keep up the good work
Most underrated channel I've seen, tutorials are so clear and simple yet detailed. Thank you!
does the "use client" in wrapper component make the whole page not ssr friendly?
lol, now main issue is how to get data from db in js file :)) u used static json array
thanks man
Is NEXT_PUBLIC_ENV working well on the client side?
Sent you a dm on instagram.
hi. can i use your method to set cookies for value of cart id?
Fetching to an outside url, in your example dummy.json/products didnt work for me :(
But doesn't it mean that the slugs are open and accessible to anyone?
I have a question what microphone do you use? Thanks!
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.
Mil gracias
Hey, what is the difference between router handlers and api routes, and which one can i use in a next js 14 app?
This is part of the Next JS 14 tutorial series. Check out the first video which goes through all the basics 🙌
Awesome. thanks v much
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
Great
🙌
13:57 Commenting Timestamp for notes.
I've never thought of this. Nice 🙌🙌
I really like the straightforward nature of this tutorial. Way to stay on task and show how to do the thing concisely.
Nice video but when i create my own custom api route a POST route amplify throws error 500, please how do i resolve this
Join my Patreon and download the code for no errors lol 🔥 also, figuring out bugs will make you a better programmer 🙌🙌
u should have your own paid channel. it is that good
Glad you're loving it 👊 ps. Love your movies. Especially Inception 🙌😂
Thanks, I like your content happy coding, where can I find the previous video?
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 🙌
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?
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 🙌
@@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
Really helpfull ;) thanks
Finally what I’ve been looking for! Thanks for the wonderful info!!!
Great thanks for sharing
Awesome content as always Kai!
thanks!
This is a great video. Thanks a lot!
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.
I have an upcoming tutorial using next-auth. Hopefully it'll answer the sign in and expiration questions 😬👊
Idk why they don’t update the docs. But great tutorial
If you go to the NextJS website, make sure to select the "App Router" from the upper left dropdown to see the new docs 👊
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.
We've all been there. It gets faster over time 🔥
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.
I plan on making an updated tutorial soon with React 19 🙌
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.
terrible
bro can you make a todo app with next js with external api fetch , typescript would be more related if you can.
bro you are a gold.
My viewers like you are gold ✨🙌
Would the Axios code normally be in the same file as the form?
Hey why do i get the error useFormStatus is not defined? I am also using nextjs14 and react 18 and react-dom 18
thanks for theses valuable infromations
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.
ME too I don't know how to connect dual monitor and have two monitors
could u pls add this code to your Github repository
I though u need to import react for each component page, but u don't and it works. Why is that?
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.
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
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)
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)
Love the intro 💪
Use typescript
no
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!
thank you very very much, God bless