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!

1b0ab2500efc1b91424fb49045312929?s=128

Yos Riady

April 17, 2017
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. How Do I Get Started?

  6. A brief introduction to Next.js React Made Easy and Simple

    Yos Riady yos.io goo.gl/RojVMa
  7. None
  8. • 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
  9. https://github.com/yosriady/hello-next

  10. Shared Components Project setup Client-side navigation Setup Navigation Sharing Dynamic

    Server Fetching data Dynamic content
  11. Getting Started

  12. 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
  13. Navigation

  14. • 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
  15. Shared Components

  16. • Use shared components in your pages! ◦ Common Headers,

    ◦ Layouts, etc. • Import components from NPM modules and use them (Link) Shared Components: What We Learned
  17. Dynamic Pages

  18. None
  19. • Dynamic pages with query strings • Passing data through

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

  21. Server Side Support: What We Learned • Extend routing functionality

    with a Node.js server ◦ Access request object ◦ Extend default Next.js handler ◦ Custom routes
  22. Fetching Data

  23. 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
  24. Shared Components Project setup Client-side navigation Setup Navigation Sharing Dynamic

    Server Fetching data Dynamic content
  25. 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
  26. Thanks Yos Riady yos.io

  27. Questions? Yos Riady yos.io

  28. A brief introduction to Next.js React Made Easy and Simple

    Yos Riady yos.io goo.gl/RojVMa