WhoBuilt

Introduction to Next.js

Dec 28, 2019· 26 min· 79K views·Watch on YouTube

Speaker

Lee Robinson, developer and creator of the Mastering Next.js course, introduces Next.js for building React applications and compares it with Gatsby and Create React App; no company or co-host is identified.

What Next.js provides

Robinson describes Next.js as a React framework with zero-config setup, ways to customize defaults, and server-side rendering built in. The course is aimed at people with basic HTML, CSS, JavaScript, and React knowledge, and its code will be open source.

Static and dynamic pages in one app

Using a client project for Beyond HQ, Robinson shows how one Next.js site can serve static marketing pages alongside a dynamic SaaS product. The SaaS example queries a database, while the marketing pages compile to HTML, CSS, and JavaScript. He says this combination can support a product as its needs change.

Rendering, routing, and code splitting

Robinson says server-side rendering can improve initial page delivery and make content available to search engines sooner. Next.js also provides file-based routing through the `pages` folder and splits JavaScript by page by default. In a demo, the `about.js` and `index.js` bundles are 72 KB and 75 KB, respectively.

Choosing between Next.js, Gatsby, and CRA

Robinson presents Next.js as a choice for static or dynamic sites that need built-in server-side rendering, while noting that it requires learning framework-specific concepts. He describes Gatsby as suited to static sites, with GraphQL and a plugin library, and notes that large builds can take a long time. Create React App is closer to plain React and easier to learn, but routing and code splitting require setup, and it does not provide server-side rendering.

Takeaways

  • Consider whether a site may need dynamic features later; Next.js can combine them with static pages.
  • Use server-rendered content when fast initial delivery and search discoverability matter.
  • Next.js file-based routing and per-page code splitting reduce setup work for growing apps.
  • Gatsby may suit static sites where its plugins help, but GraphQL and build times are tradeoffs.
  • Create React App offers a simpler React starting point, while routing and code splitting need configuration.

Mentioned in this talk

Search inside this talk

What was claimed 9

Related talks