No content

No content

No content

No content

How Do I Get Started? 

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

No content

● 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 

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

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

Getting Started 

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 

Navigation 

● 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 

Shared Components 

● Use shared components in your pages! ○ Common Headers, ○ Layouts, etc. ● Import components from NPM modules and use them (Link) Shared Components: What We Learned 

Dynamic Pages 

No content

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

Server Side Support 

Server Side Support: What We Learned ● Extend routing functionality with a Node.js server ○ Access request object ○ Extend default Next.js handler ○ Custom routes 

Fetching Data 

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 

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

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 

Thanks Yos Riady yos.io 

Questions? Yos Riady yos.io 

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