In this Next.js course for beginners, you will learn how to build a full-stack App from scratch. We'll also learn how to deploy the App using Vercel and to sync up GitHub with Vercel so we deploy the app automatically.
Next is the React Framework for production. It makes building Apps, small or large, a lot easier. It has many features out of the box that you can use that will save loads of time.
📝 Database:
💻 Source Code:
Course from Alicia Rodriguez . Check out her channel: @timetocode_with_ali
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro: Showcase App
⌨️ (0:02:07) Summary of the content of the video
⌨️ (0:02:40) Prerequisites for this video.
⌨️ (0:03:18) What is Next.js
⌨️ (0:04:38) Main Feature: Server-Side Rendering
⌨️ (0:09:03) Create a new Next.js Project
⌨️ (0:17:56) Analyse the Final App we are going to build
⌨️ (0:20:30) Next.js Files Structure
⌨️ (0:23:53) Next.js Pages & Build the pages
⌨️ (0:41:50) Data Fetching
⌨️ (2:02:15) Build the Components – UI (user Interface)
⌨️ (2:24:03) Add CSS – Styles
⌨️ (3:21:27) API Routing in Next.js
⌨️ (4:29:00) Deploy the APP in Vercel
⌨️ (4:43:06) Suggestions to improve the App
Attributions/credits
Server icons created by srip – Flaticon –
Js icons created by Freepik – Flaticon –
Html icons created by catkuro – Flaticon –
Load icons created by Freepik – Flaticon –
Sound effects:
Sound music:
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
Awesome! Try to create a Django tutorial in 2023❤️
Django is worst to begin with. How things pop up is still a mystery for me. Love Nodejs and Java backend
W as always thanks for the hard work 💕
Great job, thanks freecodecamp for your efforts
I’ve a question. Recently my nextjs start commands automatically generated the build files but now it asks for manual creation of the build files. Please reply me.
What is the error exactly?
Sadly not the new way how vercel wants us to use next in the future, as far i know
Thanks for making this beginner friendly
Thanks for the great video.
It would be interesting to see how much faster it would be using COPILOT.
I am participating in a copilot trial, so I’ll tell you soon 😊
@Time to Code Thank you!
Chatgpt. But you have to kee definine each function or page in detail. But it’s till much faster than manual coding
would be nice if there would be starting Git branch with say CSS and Html code when you started this course , starter repos do change CSS styles and HTML code many time , it would allow anyone who starts do have experience rather than fumble around why my output looks different
Great input! I’ll take it into account for the next time!
Wow just begin this course and realize how good it is written.
Best!
Hi 👋 I am Alicia from the video.
Thank you all for watching. Feel free to reach out to me with questions or suggestions for future videos and check out my other videos ☺️
@timetocode_with_ali is this the latest next and react version?
@ #Alicia
1. is not required inside 2. In order to automatically import Link, Image, or anything, place the cursor at there & press ctrl + space bar (Same for both mac & windows).
@Kuldeep Bhatt
No I don’t think so, as she used a tag inside Link which was necessary in previous versions but is not required in later versions of NextJs.
You are so cute
@Dhrumil But it is out of context..
Nice one guys. At least now when i search for next.js FCC I don’t see nest.js 🙂
looks great! i wish there were subtitles thought:(
Wait, is this a framework of a framework? So many frameworks in JavaScript. 😔
thanks for the course. i’ve been a long time vuejs user, but now I’m planning to work on nextjs more on my upcoming projects.. this video is very helpful
Ive been create-react-app. It’s frustrating how simple yet different they all are. Especially when you don’t necessarily want to know them all, but you need to.
Is the whole using node 8 thing a part of the show? Is there a reason to ever be using something that old? I could see some reasons as node and all its blessings are just that and equally opposite, but the lowest I have had to experience going is 16 for hardhat. I am under the impression that it is more vulnerable the further from LTS that you get. Maybe there is more than one LTS version of some things? Thanks
In api.js file can we use the other name or we have to use the handle name ? I mean can I change export default function handle(req, res) to export default function getList(req, res)
Oh my God, this is EXACTLY what I have been looking for today! This channel reads its subscribers minds!
Alicia, thanks fot the video.
One note: When I opened data.json in your repo, I saw that “city” in all events for London is has value with capital “L”
so ev.city wont be equal to cat, that can create a confusion
Amazing Tutorial Alicia👏👏