Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Made Easy and Simple with Next.js

React Made Easy and Simple with Next.js

It’s not a secret that creating client-side JavaScript is pretty difficult these days. Next.js is a minimalistic framework for server-rendered React applications with zero setup and simple deployment!

Yos Riady

April 17, 2017

More Decks by Yos Riady

Other Decks in Programming


  1. • Server-rendered by default (better SEO) • Automatic code splitting

    & lazy loading for faster page loads • Simple client-side routing (page based) • Webpack-based dev environment which supports Hot Module Replacement • Able to implement with Express or any other Node.js HTTP server • Customizable with your own Babel and Webpack configurations Next.js Features
  2. Getting Started: What We Learned • Setting up is simple

    and fast • Comes baked in with helpful development features ◦ Error handling ◦ Hot Module Replacement • Create a page by exporting a React component in pages/ ◦ Pages = Top-level components ◦ Use the filesystem as an API
  3. • Use Link to do client-side routing • Built-in client-side

    history support!! • Code splitting, components are lazy loaded per page • Prefetching pages with Link prefetch! (not shown) ◦ Lazy Load components ahead of time ◦ Great initial load performance of a website ◦ Ahead-of-time download capabilities of an app Navigation: What We Learned
  4. • Use shared components in your pages! ◦ Common Headers,

    ◦ Layouts, etc. • Import components from NPM modules and use them (Link) Shared Components: What We Learned
  5. • Dynamic pages with query strings • Passing data through

    components with props ◦ Page props ◦ Parent component props • Route masking Dynamic Pages: What We Learned
  6. Server Side Support: What We Learned • Extend routing functionality

    with a Node.js server ◦ Access request object ◦ Extend default Next.js handler ◦ Custom routes
  7. Fetching Data: What We Learned • Fetch component data in

    getInitialProps ◦ Isomorphic fetching (!) • When we render the page on the server, ◦ Fetch happens on the server • When we navigate via client-side ◦ Fetch happens on the client
  8. In Closing • Next.js makes it easy for you to

    get started with React. • Give it a try! Especially if: ◦ You’re new to the React ecosystem ◦ You need an SSR application ◦ You just want to get things done