Next.js Crash Course for Beginners – Learn NextJS from Scratch in this 100% Free Tutorial!

Learn all about Next.js, React’s most popular Production Framework! Get Started with NextJS and make build amazing websites with ReactJS even more fun! Full Project included, 100% free 3 hours long course!

Join the full Next.js course: https://acad.link/nextjs
Exclusive discount also available for our bestselling React.js course: https://acad.link/reactjs
Join our Academind Community on Discord: https://academind.com/community

First Starting Project Code: https://github.com/mschwarzmueller/nextjs-course-code/tree/e099f80089b65e45f500b75fec1861fb36179f4f
Main Project Starting Code: https://github.com/mschwarzmueller/nextjs-course-code/tree/9c9e9f19b1bd27605fb4ccdca2d1a0ebb5c3a802

Check out all our other courses: https://academind.com/courses

———-

Timestamps:
Welcome 00:00
What is NextJS? 00:46
Key Feature: Server-side (Pre-) Rendering of Pages 05:31
Key Feature: File-based Routing 12:09
Key Feature: Build Fullstack Apps With Ease 15:22
Creating a NextJS Project & IDE Setup 17:12
Analyzing the Created Project 22:52
Adding First Pages To The Project 25:44
Adding Nested Pages / Paths 31:50
Creating Dynamic Pages 35:37
Extracting Dynamic Route Data 39:13
Linking Between Pages 43:21
Onwards To A Bigger Project! 50:34
Preparing Our Project Pages 54:07
Rendering A List Of (Dummy) Meetups 57:49
Adding A Form For Adding Meetups 01:02:52
The “_app.js” File & Wrapper Components 01:06:47
Programmatic Navigation 01:13:04
Adding Custom Components & Styling With CSS 01:16:51
Modules
How NextJS Page Pre-Rendering Actually Works 01:26:51
Introducing Data Fetching For Page Generation
(getStaticProps) 01:32:43
More Static Site Generation (SSG) With getStaticProps 01:41:39
Exploring getServerSideProps 01:47:23
Working With Dynamic Path Params In getStaticProps 01:53:50
Dynamic Pages & getStaticProps & getStaticPaths 01:59:04
Introducing API Routes 02:06:21
Connecting & Querying a MongoDB Database 02:12:41
Sending HTTP Requests To API Routes 02:22:13
Getting Data From The Database (For Page
Pre-Rendering) 02:29:02
Getting Meetup Detail Data & Paths 02:36:12
Adding “head” Metadata To Pages 02:45:53
Deploying NextJS Projects 02:55:12
Working With Fallback Pages & Re-Deploying 03:07:38
Summary 03:11:52

———-

• Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: https://www.instagram.com/academind_real
• Join our Facebook community on https://www.facebook.com/academindchannel/

See you in the videos!

———-

Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!