From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
Migrating from React to Next.js
From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment
Migrating from React to Next.js
All the hard work we've done in every section is leading up to this very moment. I don't know if you ever watched Dragon Balls, but it's like that. We're going super saiyan, just full force. Let's do it. I'm pumped. I'm stoked. I hope you are too. Let's get started with Next.js. Now, we're going to do this professionally. Up to this point, we've had everything in this one index.html script file and we've been loading and react with these scripts ourselves manually so that we do things hands-on. To add Next.js, we don't need to load React and React DOM scripts from unpackage.com anymore. Instead, we're going to install these packages locally using the Node Package Manager, aka NPM. So make sure you add Node.js. If you don't know what that is, go back to our noobs sections for developers where I think we cover Node.js. but to make sure you got node go to your terminal and in your terminal run node version and you should see you got a version all right so from the terminal we want to…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Contents
-
-
Course overview1m 52s
-
What is Next.js and web development basics8m 48s
-
What are the essentials of web development for beginners?6m 26s
-
Quick note on self-learning2m 4s
-
What is React for complete beginners?4m 15s
-
What is Next.js exactly and its usefulness basics?3m 20s
-
(Locked)
How websites and HTML work for complete beginners5m 1s
-
-
-
(Locked)
Download Node.js and what is Node.js?2m 23s
-
(Locked)
Setting up our learning environment5m 42s
-
(Locked)
What are functions in JavaScript?9m 42s
-
(Locked)
Example of how functions work in JavaScript for complete beginners9m 18s
-
(Locked)
What are function expressions in JavaScript?9m 28s
-
(Locked)
JavaScript interview question trick with function expressions and utility fun16m 14s
-
(Locked)
What is function hoisting in JavaScript?6m 37s
-
(Locked)
How scope works in JavaScript15m 53s
-
(Locked)
What are closures and an example with JavaScript explained?11m 49s
-
(Locked)
Advanced closure module pattern with data privacy encapsulation15m 16s
-
(Locked)
What are arrow functions and usefulness in React?17m 13s
-
(Locked)
Destructuring with JavaScript23m 1s
-
(Locked)
-
-
(Locked)
Development environment and build versus production build with Next.js8m 24s
-
(Locked)
Introduction to the Next.js compiler3m 8s
-
(Locked)
Demystifying what is meant by Next.js 'compiler'1m 19s
-
(Locked)
What is minification in Next.js?4m 44s
-
(Locked)
What is bundling in Next.js?3m 8s
-
(Locked)
What is code splitting in Next.js?3m 44s
-
(Locked)
Build-time versus run-time basics2m 44s
-
(Locked)
What is the client and what is the server in web applications? The basics5m 46s
-
(Locked)
What is rendering in Next.js?4m 5s
-
(Locked)
What is pre-rendering in Next.js?2m 37s
-
(Locked)
What is CSR, client-side rendering with Next.js?3m 29s
-
(Locked)
How server-side rendering works as a deeper dive7m 3s
-
(Locked)
What is SSG in Next.js?2m 48s
-
(Locked)
What are CDNs and the edge in Next.js and Vercel?9m 58s
-
(Locked)
-
-
(Locked)
Introduction and quick note about the upcoming final project2m 21s
-
(Locked)
How to start a Next.js template locally6m 12s
-
(Locked)
Next.js template file structure overview4m 30s
-
(Locked)
How pages work in Next.js3m 16s
-
(Locked)
Prefetching and codesplitting with Link and CSN – client-side navigation in Next.js9m 9s
-
(Locked)
-
-
(Locked)
Download the CSS starter kit project from Next.js official7m 27s
-
(Locked)
How images optimize with Next.js5m 31s
-
(Locked)
Scripts and header data and props with Next.js6m 58s
-
(Locked)
CSS modules and Next.js optimizations with layout7m 12s
-
(Locked)
Global styling with Next.js4m 47s
-
(Locked)
Customizing utility styles with Next.js9m 55s
-
(Locked)
Metadata for SEO and social media with Next.js6m 43s
-
(Locked)
Writing dynamic layout components with Next.js11m 31s
-
(Locked)
How to use children and props in React and Next.js10m 54s
-
(Locked)
-
-
(Locked)
Pre-rendering tests with Next.js6m 53s
-
(Locked)
What is static generation versus server-side rendering with Next.js?4m 17s
-
(Locked)
Static generation with data in Next.js4m 36s
-
(Locked)
Concise basic algorithms for Next.js practice and data processing20m 57s
-
(Locked)
Static generation and GetStaticProps with Next.js20m
-
(Locked)
When to use GetStaticPropsServer with Next.js3m 5s
-
(Locked)
SSR versus CSR and GetServerSideProps with Next.js7m 20s
-
(Locked)
-
-
(Locked)
How to create dynamic routes with Next.js7m 15s
-
(Locked)
getStaticPaths with Next.js implementation5m 14s
-
(Locked)
Mastering dynamic static rendering with Next.js12m 3s
-
(Locked)
Rendering markdown and security vulnerabilities with injected HTML11m 23s
-
(Locked)
Polishing the dynamic post pages10m 43s
-
(Locked)
Polishing a Next.js component with styling7m 22s
-
(Locked)
Fetching data and database querying plus ISR with Next.js11m 26s
-
(Locked)
API routes with Next.js9m 1s
-
(Locked)
-
-
(Locked)
What is GitHub and how to get started with it?6m 28s
-
(Locked)
Deploy your app to Vercel and commit changes with GitHub12m 11s
-
(Locked)
Real-world multi-branch feature building on GitHub with React9m 18s
-
(Locked)
Pull requests and merging code reviews with GitHub automatic Vercel deployment8m 55s
-
(Locked)