Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Online Business Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Next.js

All about NextJS

Smoothly sailing from setup to production
Rating: 4.0 out of 54.0 (51 ratings)
12,245 students
Created by Atila Fassina
Last updated 2/2021
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Develop serverless/JAMstack application with NextJS, React, and TypeScript
  • Understand the advantages and best practices regarding Serverless architecture and how to use them to your advantage
  • Adhere to SEO (Search Engine Optimisation) best practices and make your content easily indexable to all search engines
  • Understand what React, NextJS, TypeScript, and modern tooling can do for you, and use them in the best way possible

Course content

8 sections • 58 lectures • 2h 59m total length

  • Preview06:05

  • Preview01:43
  • Setup Github
    00:44
  • Setup TypeScript
    02:37
  • Migrating from JavaScript to TypeScript
    00:49
  • Configure Prettier
    01:32
  • Preview01:41
  • EmotionCSS: Setup
    01:14
  • EmotionCSS + TypeScript
    00:19
  • Code Structure
    05:11
  • EmotionCSS: Global styles
    00:47
  • Absolute Imports
    01:41
  • Preview01:23

  • Using SVG icons
    01:20
  • Component: Header
    02:31
  • Component: Navigation
    04:14
  • Layout: Page
    01:18
  • Static Routes
    01:25
  • Create about page
    02:04
  • NextJS Image Component
    02:56
  • Styling the about page
    04:41
  • Handle SEO data
    01:56
  • SEO and Social meta tags
    02:25
  • Component: SEO
    03:35
  • Component: Footer
    06:36
  • Create your Colophon
    2 questions

  • Markdown + JSX = MDX
    02:12
  • Post data: Grey Matter
    01:59
  • Render post content with MDX
    09:10
  • List on index - create post directory
    04:07
  • Dynamic routes + getStaticPaths
    09:13

  • Post specific SEO data
    04:12
  • Layout: Post
    05:19
  • Post specific Header
    03:20
  • Component: Short-bio
    03:22
  • setup for styling post-list
    02:51
  • Component: list of posts
    03:30
  • Styling list of posts
    05:49
  • MDX-Components: Create a code highlight component
    06:55

  • Cross-Browser test and refining
    04:16
  • Going through all the work so far
    00:46

  • Update next-mdx-remote with new Types
    03:26
  • Checking Types automatically
    01:26
  • Move Types to their own file
    02:26

  • What is an RSS feed?
    00:39
  • Bare-Bones Serverless Function
    02:31
  • Feed RSS
    08:02
  • Add RSS link to our Social bar
    02:24
  • Environment Variables
    01:21
  • Set up local Environment Variables
    02:19
  • Env Variables on Vercel
    01:13
  • Fetch videos from Youtube
    05:48
  • Unwrap Promise type
    03:01
  • Catching fetch errors
    02:11
  • Fetch external content on getStaticProps
    02:56
  • [component] Youtube List
    03:42
  • Youtube List - styles
    05:04
  • Responsive Styles and Accessibility for Youtube List
    02:15
  • Recap
    00:35

Requirements

  • Fundamentals of HTML, CSS, and JavaScript
  • No previous knowledge of TypeScript, NextJS, or Serverless

Description

Is this course right for you ?

This course is meant for everyone wanting to level up their application delivery with best practices and unparalleled Developer Experience.

  • If you‘re an inexperienced developer trying to figure out what stack to choose and how to start a web application.

  • If you‘re an experienced developer who wants a consistent workflow with a set a low dependency resources which integrate seamlessly and provide the best-in-industry User Experience


What is the JAMstack and Serverless?

JAMstack is modern web development architecture based on client-side JavaScript, APIs, and prebuilt Mark-up. It leverages Serverless architecture to create reusable (micro)services as reusable APIs. It pre-builds all content of a website when possible and make it available through the edges of a Content Delivery Network.

A JAMstack application is either statically generated (Static Site Generation - SSG), rendered on the server (Server-side Rendering - SSR), or uses a more advanced combined technique: Server-side Pre-Rendered (SSPR). In this course, we will use SSPR to use the best of SSG and combine with SSR.


The dream-stack for the JAMstack:

  • NodeJS

    like an iceberg, there is a big chunk of a NextJS app which runs on the server. For that, we need NodeJS. On top of that, we will create our own Serverless Functions, which will run entirely on the server with NodeJS.


  • TypeScript

    when properly set, strong-typing brings to the table a huge advantage when using external resources (such as libraries and frameworks). It makes the code more discoverable since text editors (like VSCode) can provide with insights when we‘re writing the code, and safeguard us from runtime errors. It makes the code self-documented and allow us, in the future, to touch many moving parts without fear causing unexpected side-effects.

  • React

    we will build an app that takes out the most of the Component-Based Architecture. With this, we can achieve a scalable, maintainable, and easy-to-read architecture for our User Interface. It will be easy to add more functionality in the future and replace/optimize existing features.

  • NextJS

    for the best developer experience, we get everything a high-quality production web application should have, most already baked-in and ready to be used, just a few configuration strokes away.

  • Emotion

    a performant and flexible CSS-in-JS library. It will handle our styles with great Developer Experience and compiling for the best production performance possible.

  • MDX

    bringing the JavaScript runtime scope to Markdown, MDX is to Markdown what JSX is to HTML. We will be able to use React components within Markdown files.


More coming

This is not a course that will be forgotten after published, it is actually only the beginning. In enrolling now you guarantee access to the upcoming lessons modules. For example:

  • Serverless Functions: post-production phase

  • Content Management System (CMS) integration: recording phase

  • Progressive Web App (PWA): scripted

  • Accessibility Testing: scripted

  • Performance monitoring: scripted


Do you believe something should be covered?

Let me know and I‘ll definitely consider it!

Who this course is for:

  • All levels of experience who are interesting in production level React, NextJS, and NodeJS applications
  • Everyone passionate or who wants to understand more about JAMstack and Serverless applications
  • This course will help you explain difficult concepts of performance within the modern web development world
  • After the lessons you will be able to understand modern good practices and apply them on every application you work with

Instructor

Atila Fassina
Software Engineer, Consultant, Instructor
Atila Fassina
  • 4.3 Instructor Rating
  • 302 Reviews
  • 15,935 Students
  • 3 Courses

I’m a Software Engineer specialized in Jamstack and Design Systems.


As a self-taught developer, I have walked an irregular learning path. My goal is to make it easier and more accessible for anybody to learn web development.


You will get simple and complex topics presented in an easy to digest, reality-based, and nice way. Always with a personal approach and friendly support!


My courses are a product of everything I have learnt throughout 11+ years of experience working in small and large companies, with local and distributed teams across the globe (Brazil, New Zealand, Germany) in order to help you achieve your objectives!


---


Eu sou um Desenvolvedor de Software especializado em Jamstack e Design Systems.


Como um desenvolvedor autodidata, eu tive uma jornada de aprendizado não-tradicional. Meu objetivo é tornar fácil e acessível para qualquer aprender desenvolvimento web.


Você tópicos de simples à complexos apresentados de maneira fácil de digerir e baseados em uso real. Sempre com uma abordagem e assessoria amigáveis.


Meus cursos são o produto de tudo que já aprendi durante meus 11+ anos de experiência trabalhando em empresas pequenas e grandes, com times locais ou distribuídos e através do planeta (Brasil, Nova Zelândia, Alemanha) para que você alcance seus objetivos.


  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.