Companies Home Search Profile

Next.js and React 18 Bootcamp | Build a Production Site

Focused View

David Joseph Katz

6:18:39

54 View
  • 1. Course Curriculum Overview Next.js, React, and Web Development.mp4
    05:13
  • 2. Learn The Most Important Next.js Lesson Right Away Build in Next.js Right Away.mp4
    16:04
  • 3. React Fundamentals and Client vs. Server Components In Depth.mp4
    07:32
  • 4. Course Requirements Command Line App, Node.js, and Github Repository.html
  • 1. Start the Next.js and React Project.mp4
    08:41
  • 2. Link to Pages with NextLink Grid Item.mp4
    17:14
  • 3. Style with Tailwind CSS.mp4
    21:35
  • 4. Next.js Fonts and Responsive Design.mp4
    14:43
  • 1. Connect Page Setup.mp4
    11:03
  • 2. Next.js Client Components.mp4
    19:53
  • 3. Next.js Server Actions (get-followers).mp4
    14:39
  • 4. Mailjet API post-contact Server Action and Next.js Environment Variables.mp4
    16:00
  • 5. React 18 useTransition and Create Contact Form.mp4
    24:49
  • 1. Next.js Layout Structure, Loading.js, and Global Components.mp4
    09:43
  • 2. Next.js Dynamic Segments and generateStaticParams record[id].mp4
    18:02
  • 3. Next.js generateMetadata record[id]page.js.mp4
    06:06
  • 4. React Suspense and React lazy Embed.mp4
    19:54
  • 5. Next.js not-found and Route Groups.mp4
    13:56
  • 6. Nested Dynamic Segments record[id][content].mp4
    14:05
  • 7. Breadcrumbs Component and Next.js useSelectedLayoutSegments nav-title.mp4
    24:41
  • 1. Setup Quiz Form and (form) route group.mp4
    19:03
  • 2. Next.js useSearchParams and Quiz result.mp4
    20:17
  • 3. Next.js Images and Web Standards Discography.mp4
    22:59
  • 4. React 18 useDeferredValue.mp4
    21:32
  • 1. Next.js Deployment with Vercel.mp4
    04:27
  • 2. Remaining Pages and Functionality.mp4
    05:31
  • 1. Congratulations.mp4
    00:57
  • 2. Bonus.html
  • Description


    Build a production Next.js and React 18 site, w/ server and client components, React 18 hooks and Next.js hooks, & more.

    What You'll Learn?


    • The important difference between client vs. server components, and how using client vs. server components optimizes a React application.
    • The difference between client vs. server-side rendering.
    • The Next js architecture with layout, page, and loading files.
    • React 18 hooks like useTransition and useDeferredValue.
    • How to use React Suspense and React lazy, to lazy load components.
    • How to create dynamic segments with Next js.
    • How to create route groups with Next js.
    • Next js specific hooks like usePathname, useSearchParams, and useSelectedLayoutSegments.
    • Next js server actions.
    • Deployment with Vercel.

    Who is this for?


  • Rising engineers looking to add Next js and React 18 to their resume.
  • Experienced engineers hoping to learn Next js and React 18, from a fellow experienced engineer.
  • Anyone looking for a production-level Next js and React 18 project to build.
  • Anyone who wants to understand the difference between client vs. server components in detail.
  • Anyone who would like a thorough walk-through of the Next js architecture.
  • Anyone who wants to see practical examples of React 18 useTransition and useDeferredValue.
  • Anyone who wants to see practical examples of advanced Next js concepts like dynamic segments and Next js hooks.
  • What You Need to Know?


  • A code editor, a command line, and Node js (installation explained in course).
  • Some coding experience - ideally JavaScript.
  • Web development and/or React experience will help.
  • More details


    Description

    Reading the Next.js docs, simply might not be enough.

    If you’re aiming to work in web development, you'll need Next.js and React on your resume skills. To truly understand how to create a production-level Next.js and React application, you should build one.

    In this course, we’re going to rebuild a production-level Next.js and React 18 website. The website is a music artist portfolio. The website features an elegant design, and offers a lot of functionality. You’ll find a preview of the website in the first video of the course (available for preview).

    The course is designed to help you achieve 3 main goals:

    • Get a thorough understanding of Next.js and React 18.

    • Gain the confidence to fully explain advanced React and Next.js topics like client vs. server components, the Next.js architecture, etc.

    • Create a production-level Next.js and React 18 project, that can be adapted into a personal portfolio, or product for a client.

    Here’s a preview of the course journey:

    • Start by learning the most important React and Next.js lesson right away: the difference between client vs. server components.

    • Begin the course project, and start exploring the Next.js architecture.

    • Learn Tailwind CSS, an advanced CSS styling approach.

    • Go more into depth with server and client components.

    • Learn Next.js server actions.

    • Explore the React 18 useTransition hook.

    • Expand upon Next.js fundamentals, and create a shared layout structure.

    • Create dynamic segments with Next.js and learn generateStaticParams.

    • Explore React Suspense and React lazy.

    • Dive deeper into advanced Next.js hooks like useSelectedLayoutSegments, and useSearchParams.

    • Explore the React 18 useDeferredValue hook.

    • Learn how to deploy a Next.js application.


    You may be wondering, why should I learn from you?

    I’ve worked in the industry as a software engineer working for over 5 years. So I’ve applied many of the best practices I’ve learned to the course code.

    I’ve also created nearly 20 courses, with over 400,000 enrollments. I’ve learned plenty of ways to create better course curriculums, to help you learn more things and learn more efficiently.


    ***

    Here are reviews from other students from my React and JavaScript courses in the past:

    “Great course, instructor has a great way to explain things. Loved coding examples… Well worth the time to invest and code through. Kudos to the instructor for style and mastery of technology and presentation!”


    “I started with some React concepts in mind and I found this course very useful… Also I am learning practical ways to do things and advance to more complex apps. I like very much the step by step, simple to complex, and practical style to explain concepts. Also, David is very nice and quick to solve any question.”

    ***


    Overall, I’m confident that after completing this course, you’ll be able to put Next.js and React 18 on your resume. And of course, you’ll be equipped with a solid foundation to help you build Next.js and React 18 projects in the future.

    So, hopefully, I’ll see you in the course!

    Who this course is for:

    • Rising engineers looking to add Next js and React 18 to their resume.
    • Experienced engineers hoping to learn Next js and React 18, from a fellow experienced engineer.
    • Anyone looking for a production-level Next js and React 18 project to build.
    • Anyone who wants to understand the difference between client vs. server components in detail.
    • Anyone who would like a thorough walk-through of the Next js architecture.
    • Anyone who wants to see practical examples of React 18 useTransition and useDeferredValue.
    • Anyone who wants to see practical examples of advanced Next js concepts like dynamic segments and Next js hooks.

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category
    David Joseph Katz
    David Joseph Katz
    Instructor's Courses
    David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.David has gained valuable experience from the tech industry. By incorporating the best practices he has learned at work, he hopes to create the highest quality learning experiences possible. Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.
    Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.
    • language english
    • Training sessions 26
    • duration 6:18:39
    • Release Date 2023/09/10