[FrontendMasters] Introduction to Next.js

0
[FrontendMasters] Introduction to Next.js

Introduction to Next.js is a complete full-stack framework built on prime of React.js. You can use Subsequent.js to create static websites like blogs and documentation web sites to even full-blown, full-stack applications, and APIs. On this course, you will study server-side rendering, static website era, data fetching, build API endpoints, creating pages with the file system, add CSS modules within Next.js, and much more.

Introduction

  • Introduction to Next.js Scott Moss introduces the course content material, mentions the course stipulations, and particulars previous and present work experience.
  • Course Overview Scott describes the course format, shares the course repo, and discusses the primary mission, a notes software that the scholars get to construct throughout this course. The specifics of what college students will study within the course are additionally mentioned on this phase.
  • SIntroduction to Next.js Overview Scott explains why Subsequent.js is an entire fullstack framework for contemporary purposes that relies upon closely on React, compares React and Gatsby to Next.js, and explains that Subsequent.js has extra to supply. Next.js can be utilized by builders for server-side rendering (SSR), to create a single web page software (SPA), or to make use of an API.
  • Getting Began with Subsequent.js Scott demonstrates the way to set up, the way to begin growing an software with Subsequent.JS, and covers the entire needed instructions to start out a brand new mission.

Routing

  • Introduction to Next.js Routing with Pages in Next.js Scott creates folder for the supply code for website pages, a default index web page, and demonstrates the way to add nested routes to the appliance.
  • Dynamic Route Parameters in Subsequent.js Scott demonstrates the way to question a route utilizing a parameter. On this instance, the ID is the parameter that’s used.
  • Catch-All Routes Scott demonstrates the way to create a catch-all route, and refers to it as a glob as a result of it captures all of the routes inside the identical folder. Catch-all routes are helpful when a developer has a number of pages with related if not similar layouts, however have completely different content material and want a novel URL.
  • Web page Navigation with the Hyperlink Part Scott demonstrates the way to navigate between pages in Subsequent.js utilizing the Hyperlink element, and explains that the hyperlink element is just used for client-side transitions
  • Routing and Navigation Q&A Scott solutions questions on routing parameters, the place routes must be declared in Subsequent.js, website positioning, and the Hyperlink element.

Config

  • Introduction to Next.js Including CSS & Modules Scott explains the way to use modules written in CSS so as to add fashion to a Next.js software, and explains that CSS modules wouldn’t have a world scope and require a category identify to perform correctly.
  • Including Theme UI Scott demonstrates the way to add the Theme UI library to the appliance began in earlier sections, and explains the way to add or change the styling of the appliance. Theme UI permits builders to create theme objects and use these objects in parts.
  • Styling with Theme UI Scott explains that Theme UI has inline styling by accessing theme variables with the JSX compiler, and provides class names. The distinction between Theme UI vs. Tailwind CSS and when to make use of every can also be mentioned on this part.
  • Variants & Styling Scott continues styling the varied pages of the notes software began in earlier sections utilizing variant fashion objects. A short overview of Baseweb, an npm package deal, and its commonalities with Theme UI is mentioned.
  • Customizing the Subsequent.js Config Scott explains that, as a way to change the construct system’s conduct, lengthen Subsequent.js’s options, or add setting variables, builders have to create and replace the Subsequent.js config file.Methods to modify the configuration primarily based on completely different situations can also be mentioned on this phase.
  • Plugins Scott explains that plugins are widespread logic used and constructed by builders inside the Subsequent.js neighborhood which are added to the configuration file (subsequent.config.js), and demonstrates the way to write and add a plugin to the appliance began in earlier sections.
  • Typescript with Subsequent.js Scott offers a short overview of the already current plugins in Subsequent.js, and explains that it’s best observe to verify when a plugin was final up to date earlier than including it to a code primarily based.

API

  • Introduction to Next.js Creating API Routes Scott explains that the syntax to create routes in Next.js is just like the syntax to create pages, and provides that the file construction and the catch-all routes are the identical as nicely in Subsequent.js.
  • API Handlers Scott demonstrates the way to write an API handler that responds to all requests from a given URL, provides logic primarily based on every API route, and makes use of the next-connect npm package deal as a middleware to simplify constructing the handler.
  • Creating an API Scott demonstrates the way to create, retrieve, and delete notes from the observe software that was began in earlier sections.
  • Fetching Knowledge & getStaticProps Scott explains, that relying on when the info is required or what it’s wanted for, there are alternative ways to fetch knowledge in Subsequent.js. Methods to use the getStaticProps perform, which runs at construct time and return props, can also be mentioned on this phase.
  • Building Static Pages with getStaticPaths Scott explains that the getStaticPaths perform is just like getStaticProps, however the primary distinction is that it could fetch the entire paths and the distinctive URLs inside an software, and subsequently, works higher with dynamic paths. An instance of the way to use getStaticPaths can also be mentioned right here.
  • Constructing Dynamic Pages with getServerSideProps Scott explains that the getServerSideProps perform is just like the handlers utilized in related features, however is used inside a web page, and refactors code utilizing getServerSideProps.
  • Strategies of Fetching Knowledge Evaluate and Auth Q&A Scott opinions the varied fetch features mentioned in earlier segments, and solutions questions on getServerSideProps technique greatest practices and the way to add authentication.
  • Fetching Notes with getServerSideProps Scott makes use of the getServerSideProps perform to render a number of notes right into a single web page. The connection between the getServerSideProps perform and server-side rendering can also be mentioned on this phase.
  • Fetching Notes & Dynamic Rendering Scott continues to work on the observe fetching performance utilizing the getServerSideProps technique, explains why utilizing getServerSideProps is the most suitable choice on this case, and provides a redirect to the notes web page within the state of affairs {that a} request fails.
  • Rendering Modes Scott offers an summary of the completely different rendering modes, in Next.js particularly, static era, server-side rendering, and client-side rendering, and explains that it’s doable to make use of varied renderings inside the identical perform.
  • Working with SSR Scott explains that in some instances, builders have to skip server-side rendering (SSR), provides that Subsequent.js helps dynamic imports that, when used with element, choose out of SSR, and reside codes an instance of SSR exemption.

Deployment

  • Introduction to Next.js Deploying Next.js Overview Scott explains that, there are numerous setting by which a Next.JS software could be deployed, and recommends utilizing Vercel, a deployment package deal supported by Subsequent.js
  • Deploying Subsequent.js on Vercel Scott demonstrates the way to set up Vercel, and the way to deploy the appliance began in earlier sections in Vercel by means of the terminal.
  • Q&A Scott solutions questions in regards to the API server in Subsequent.js, the way to use MDX with Next.js, and deploying massive web sites with Subsequent.js. Methods to use sourcebit, a package deal that helps when pulling knowledge from third-party assets together with Subsequent.js, is explored on this part. Stackbit, a platform for the Jamstack can also be talked about on this phase.

Wrapping Up

  • Introduction to Next.js Wrapping Up Scott wraps up the course, encourages the viewers to study extra about Subsequent.js by studying the documentation, and concludes by stating that everybody attending the course now has the data to develop and deploy an software in Next.js.
[FrontendMasters] Introduction to Next.js

LEAVE A REPLY

Please enter your comment!
Please enter your name here