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!

Transcript

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
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
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