Next.js: Beginner to Intermediate

L&D June 2021
Steve Olsen

GOALS:

  • To learn something new
  • Smile twice (or more)

How Popular?

https://2020.stateofjs.com/en-US/technologies/back-end-frameworks/

How Popular?

https://2020.stateofjs.com/en-US/awards/

* 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

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)

  1. build-time
  2. 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-

getStaticProps()

 

 

 

 

getServerSideProps()

# 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 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

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:

https://codesandbox.io/s/nextjs-ts-materialui-vbkvk?file=/pages/about.tsx

Made with Slides.com