The document is an introduction to Next.js, focusing on its features for improving web performance and developer experience. It discusses strategies such as code splitting, server-side rendering, and best practices for setting up projects. Additionally, it provides a brief overview of routing, data fetching, and deployment within the Next.js environment.

1. Click to edit Master title style
1
Intro to NextJS
R e a c t D C
2 8 O c t o b e r 2 0 1 9
A l l i s o n K u n z

2. Click to edit Master title style
2
Allison Kunz
T A F K A L A B S . C O M
Front end engineer
React, React Native, & GraphQL

3. Click to edit Master title style
3
W h y s h o u l d w e c a r e ?
Yet another JS framework…

4. Click to edit Master title style
4
What is good performance?
I see beautiful content
(reasonably) instantly
No blank white page, no flash of
unstyled content (FOUC), even on
slower networks and devices.
Interactive with fresh data ASAP.
Loading states are contained as
component states, not full pages.
Does not devour my data plan and
/ or device battery.

5. Click to edit Master title style
5
Common performance strategies
Code splitting, dynamic import() & lazy loading
“Chunk” the monolith into many smaller bundles, usually by route. Only load modules
and components if they are actually going to be used (or not at all!)
Server-side (universal) rendering & static export
Render on the server and send the html, rather than loading all the JS bundles and
then rendering on the client. Bonus SEO benefits and caching opportunities
Preloading and prefetching
Prioritization when loading chunks, either in non-blocking parallel (preloading) or in
the background if the browser is otherwise idle (prefetching)
S I Z E
C O M P U T E
T I M I N G

6. Click to edit Master title style
6
Back in the day (~2016)

7. Click to edit Master title style
7
Rethinking the React app
F r o m t h e d e f a u l t s e t u p t o d e p l o y m e n t

8. Click to edit Master title style
8
What is good DX?
Best practices have been packaged for me
A smart person with a ton of experience with ABC knows the N general things
that need to happen, X best approaches for doing so, and common tweaks.
C O D I F I E D
E X P E R T I S E
F L E X I B L E
S T R U C T U R E
Some config. Not too much. Mostly plugins.
Too open-ended and it’s not really a structure. Too rigid and it’s just niche.
Packaged (and tested) collections of adjustments are optimally useful.

9. Click to edit Master title style
9
Just really great DX

10. Click to edit Master title style
10
Just 5 questions
What are your routes?
Does this page need data fetched server-side?
/ PA G E S
G E T I N I T I A L P R O P S
N E X T. C O N F I G . J S
What are your static assets?/ P U B L I C
Do you need some extra Webpack config?
N O W . J S O N Does the app need deployment info + secrets?

11. Click to edit Master title style
11
Let’s get started
g i t h u b . c o m / TA F K A - L a b s / n e x t j s - w o r k s h o p

12. Click to edit Master title style
12
01 - Setup
CO DE BAS E P RE P
ü .babelrc
ü linting
ü husky
S TYL E D-CO MP O N E N T S
ü babel plugin
ü _document.js
ü _app.js
AP P LAYO U T
q Container
q Header
q Page
q Footer
CRE AT E -N E X T-AP P
ü /pages
ü /public
ü /components

13. Click to edit Master title style
13
C O N T R O L PA G E I N I T I A L I Z AT I O N
• Persisting layout between page changes
• Keeping state when navigating pages
• Custom error handling using componentDidCatch
• Inject additional data into pages (getIntialProps, etc)
import App from ‘next/app’
AU G M E N T PA G E D O C U M E N T TA G S
• Enables Server-Side Rendering for CSS-in-JS libraries
• Only rendered on the server side!
import Document from ‘next/document’
From the docs:

14. Click to edit Master title style
14
02 – Navigation: Link & Router
NAVBA R S E T U P
q .NavLink
q Nav
ADD RO U TE S
q /about
q /contact
q see /_error
DY NAMIC RO U TE S
q /blog/[slug].js
q add to Nav

15. Click to edit Master title style
15
import Router from ‘next/router’
routeChangeStart(url)
routeChangeComplete(url)
routeChangeError(err, url)
…
E V E N T S
A P I
route
pathname
query
asPath
push
replace
beforePopState
withRouter()
H O C
R E A C T H O O K
const router = useRouter()
From the docs:

16. Click to edit Master title style
16
L I F E C Y C L E
• Component (page) fetched
• If component has getInitialProps, fetches data
• If error, render /_error
• Once complete, then pushState & render
E X A M P L E
import Link from ‘next/link’
From the docs:

17. Click to edit Master title style
17
03 – Data: Fetching & API routes
G E TIN ITIAL P RO P S
q .Blog
q Post
AP I RO U TE S
q Demo: /api/my-name.js

18. Click to edit Master title style
18
C O N T E X T O B J E C T
• pathname - path section of URL
• query - query string section of URL parsed as an object
• asPath - String of the actual path (including the query) shows in the browser
• req - HTTP request object (server only)
• res - HTTP response object (server only)
• err - Error object if any error is encountered during the rendering
MyPage.getInitialProps = async (ctx) => {}
From the docs:
R U N O N PA G E LOA D S W H E N
• Server rendering
• Client side routing via Link or Router

19. Click to edit Master title style
19
04 – Deployment!
ANALYTICS
ü .Build
ü Analyzer setup
G ITH U B IN TE G RATIO N
q Demo: Deployment
q Demo: Zeit dashboard

20. Click to edit Master title style
20
NEXTJS.ORG GITHUB SPECTRUM CHAT
Continue from here…