$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Yos Riady

Other Decks in Programming

Transcript

  1. View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. How Do I Get Started?

    View Slide

  6. A brief introduction to Next.js
    React Made Easy and Simple
    Yos Riady
    yos.io
    goo.gl/RojVMa

    View Slide

  7. View Slide

  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

    View Slide

  9. https://github.com/yosriady/hello-next

    View Slide

  10. Shared Components
    Project setup
    Client-side navigation
    Setup Navigation Sharing Dynamic Server
    Fetching data
    Dynamic content

    View Slide

  11. Getting Started

    View Slide

  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

    View Slide

  13. Navigation

    View Slide

  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

    View Slide

  15. Shared Components

    View Slide

  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

    View Slide

  17. Dynamic Pages

    View Slide

  18. View Slide

  19. ● Dynamic pages with query strings
    ● Passing data through components with props
    ○ Page props
    ○ Parent component props
    ● Route masking
    Dynamic Pages: What We Learned

    View Slide

  20. Server Side Support

    View Slide

  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

    View Slide

  22. Fetching Data

    View Slide

  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

    View Slide

  24. Shared Components
    Project setup
    Client-side navigation
    Setup Navigation Sharing Dynamic Server
    Fetching data
    Dynamic content

    View Slide

  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

    View Slide

  26. Thanks
    Yos Riady
    yos.io

    View Slide

  27. Questions?
    Yos Riady
    yos.io

    View Slide

  28. A brief introduction to Next.js
    React Made Easy and Simple
    Yos Riady
    yos.io
    goo.gl/RojVMa

    View Slide