ReactDC Intro to NextJS 9

ReactDC Intro to NextJS 9

• 1.
  Click to editMaster 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 editMaster 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 editMaster 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 editMaster 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 editMaster 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 editMaster title style 6 Back in the day (~2016)
• 7.
  Click to editMaster 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 editMaster 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 editMaster title style 9 Just really great DX
• 10.
  Click to editMaster 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 editMaster 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 editMaster 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 editMaster 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 editMaster 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 editMaster 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 editMaster 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 editMaster 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 editMaster 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 editMaster 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 editMaster title style 20 NEXTJS.ORG GITHUB SPECTRUM CHAT Continue from here…