Next.js adds server and static rendering options to React, which can be chosen page by page. Robinson highlights `getStaticPaths` and `getStaticProps` for generating pages from dynamic data, and compares React frameworks to Linux distributions.
Why I’m Using Next.js in 2020
Lee Robinson (leerob), a Next.js contributor and course creator, explains why he prefers Next.js for building React applications; no company or interview setting is stated.
Next.js handles optimizations such as minification, code splitting, prefetching, and build caching. Its routing loads JavaScript for the current page and separates shared code into common chunks. Robinson says developers remain responsible for performance, even when the framework makes it easier to achieve.
Robinson points to React Fast Refresh, which preserves component state during edits, and error modals with source maps. He also describes built-in TypeScript setup, public asset handling, CSS, and Sass support. He favors including commonly used capabilities in the framework over requiring many plugins.
Next.js can run anywhere with a Node server, including AWS or a self-hosted setup; `next export` can produce a static site for hosting on GitHub Pages. Redirects and rewrites can route some traffic to a legacy application while teams adopt Next.js incrementally.
Robinson says five people worked full time on Next.js at the time, including a former Create React App contributor, and describes collaboration with Google and the React core team. He cites production use at five Fortune 12 companies and more than 20,000 signups for the Next.js conference in its first two days.
Takeaways
- Choose rendering and data-fetching strategies per page as an application grows.
- Use framework defaults for code splitting and asset handling, while still checking real-world performance.
- Built-in tooling can reduce setup work and avoid maintaining a long list of plugins.
- Use redirects and rewrites to move traffic gradually from a legacy application.
- Evaluate a framework's team and community alongside its technical features.
Mentioned in this talk
Search inside this talk
What was claimed 15
- feature
Next.js: Supports client rendering, server rendering, and mixed rendering on a per-page basis.“choose on a per-page basis whether you want to render on the client, on the server, or with a mix of both”
YouTube Unverified1 source· Talk
- featureNext.js: Provides getStaticPaths and getStaticProps for statically generating websites using dynamic data.
“two APIs, getStaticPaths and getStaticProps, which let you statically generate websites using dynamic data”
YouTube Unverified1 source· Talk
- featureNext.js: Uses file-system-based routing and loads JavaScript for the visited page, extracting shared JavaScript into shared chunks.
“you're only loading the JavaScript for that page”
YouTube Unverified1 source· Talk
- featureNext.js: Includes webpack optimizations and plugins for polyfills, syntax support, and production bundle cleanup.
“It includes optimizations and plugins”
YouTube Unverified1 source· Talk
- integrates with
“webpack, which Next.js is built on top of”
YouTube Unverified1 source· Talk
- featureNext.js: Supports React Fast Refresh, preserving React state while components change.
“it allows React state to be preserved when making changes to components”
YouTube Unverified1 source· Talk
- featureNext.js: Includes TypeScript configuration setup when a TypeScript file is added.
“it will automatically set up your TypeScript config for you”
YouTube Unverified1 source· Talk
- featureNext.js: Includes image optimization and internationalization in the framework.
“image optimization and internationalization directly into the framework”
YouTube Unverified1 source· Talk
