Next.js: Beginner to Intermediate
L&D June 2021
Steve Olsen
GOALS:
- To learn something new
- Smile twice (or more)
How Popular?
How Popular?
* survey data from over 20,000 developers
Community
"Next.js is the result of the combined work of over 1,600 individual developers, industry partners like Google and Facebook, and our core team.
We're proud to see that community continue to grow. Within the last six months alone, we've seen a 50% increase in Next.js downloads on NPM, from 4.1M to 6.2M and the number of homepages using Next.js in the Alexa top 10,000 has grown 50%."
# Next.js 101
What does this thing do?
...FEATURES!...
"The React Framework
for Production"
v10.x
v11.x
-
Front end pages (eg. React templates, JAM stack) + Back end routes (eg. Express) aka BFF
-
Routing (file system based) - /pages + /pages/api
-
Static site generation (optional) and Server side rendering (optional)
-
Styling options: CSS-modules ([name].module.css), Sass (.scss, .module.scss), Less (.less, .styl), CSS-in-JS (styled-jsx)
-
TypeScript support
-
Native .env variable support
-
Dynamic module importing (code splitting), eg. https://nextjs.org/docs/advanced-features/dynamic-import#basic-usage
-
Import path aliasing, eg. https://nextjs.org/docs/advanced-features/module-path-aliases
-
Custom document manipulation, eg: https://nextjs.org/docs/advanced-features/custom-document
-
Image optimizations, eg: https://nextjs.org/docs/basic-features/image-optimization
-
CRA migration, eg: https://nextjs.org/blog/next-11#cra-migration
React + Express
-
Front-end pages
-
React templates
-
JAM stack
-
-
Back-end API routes
-
like Express, Koa, etc.
-
File-based Router
-
/pages << front-end code -
/pages/api << back-end code - Controller in "MVC" pattern
The Top 3
HTML Rendering (SSR)
-
build-time
- (static HTML pages, aka JAM stack)
-
run-time
- (dynamic HTML served, hydrate client state for SPA)
The Top 3
Tell Me More.
# API Routes
a.k.a. Back-end for front-end (BFF)
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' });
}Any file inside the folder /pages/api/* is mapped to http /api/* and will be treated as an API endpoint (not a web component).
For example, the following API route http /api/user returns a json response with a status code of 200:
/pages/api/user.js
HTTP GET: mysite.com/api/user
Notes on API:
- These are server-side only bundles, thus won't increase your client-side's bundle size.
- Not CORS enabled by default, but can be configured.
- Support for dynamic routing
- eg. /pages/api/post/[id].js
- id will be passed into the req object
-
if (req.method === 'POST') {...}
-
res.status(code) - Sets the status code. res.json(body) - Sends a JSON response. res.send(body) - Sends a string/object/Buffer response. res.redirect([status,] path) - Redirects to a specified path or URL.
# Pre-rendering HTML
Static sites FTW!
Next.js supports 2 kinds of pre-rendering:
1. Static Page Generation
2. Server-side Rendering
(a.k.a. SSR, Isomorphic)
Static
Server-side
<html>
<html>
+ hydration js
SPA
build
file server / CDN
web server
Configuration Conventions:
(only for web components)
....JSX...
/* Called at build-time (i.e. STATIC) */
export async function getStaticProps() {...}
export async function getStaticPaths() {...}pages/blog/[id].js
....JSX...
/* Called at run-time (i.e. SSR) */
export async function getServerSideProps() {
...
}-or-
# Authentication
Who are you!?
Non-trivial (as always!)
We’re having success with next-auth + Okta integration
# Best Practices
Monkey see, monkey do?
- Use a top level /src folder, eg: https://nextjs.org/docs/advanced-features/src-directory
-
/src/pages/… << MVC controllers -
/src/pages/api/… << MVC controllers
-
/src/ui << web component code/logic
-
/src/api << api route handler code/logic
-
/src/common << common libs
-
- Design a "module monolith" (aka banana-split monolith) from the start
- keep your code imports organized!
- Refactor project file structure OFTEN, as needed
Project Structure
- Use Promises + async/await syntax
- Use fetch for HTTP requests
- Use fetch + swr for HTTP GET/POST/PUT/DELETE
- https://swr.vercel.app/docs/mutation
- "stale-while-revalidate"
- UI optimistic updates (cache invalidation)
- Use React's functional components, and functional programming techniques:
- higher order functions
- pure functions
- immutable arguments
- Use React’s state management
- (useState, useReducer, etc.)
- If you want to have advanced state reducers, try redux toolkit, Eg: redux-toolkit.js.org
- Use React’s Context (useContext)
- for global state
- Use a popular web component library
- eg: material-ui.com
Should I pre-render?
My advice: Don't worry about it*, until performance makes you.
*except public pages, try to static render those
- Start with client-side rendering!
- Use server-side rendering only to optimize page render performance and loading times
- Server-side rendering complicates the lifecycle, including: page state hydration, some css lib choices, etc. NOT a free lunch.
- see: swr.vercel.app/docs/with-nextjs#pre-rendering
- In getServerSideProps(), you should NOT use fetch to call your own app’s API route; don’t make an extra network hop!
- Use static site generation only for truly static sections and pages (like blogs/docs/landing pages)
More detailed notes on SSR
THANK YOU
Give it a try.
Easy to start. Hard to stop.
Next.js fills in what React alone doesn't.
Questions?
Demo:
Next.js: Beginner to Intermediate
By solsen-tl
