Universal React Apps Using Next.js SIA KARAMALEGOS @THEGREENGREEK SIAKARAMALEGOS ! " # 

Who Am I? @THEGREENGREEK SIAKARAMALEGOS ! " # 

Server- vs Client-Side Rendering Universal JavaScript Introducing Next.js How to learn more Overview ↑ code here ↑ @THEGREENGREEK 

Server- vs Client-Side Rendering WHY CAN’T WE HAVE THE BEST OF BOTH? @THEGREENGREEK 

“ ” Universal is a term used to emphasize the fact that a particular piece of JavaScript code is able to run in multiple environments. GERT HENGEVELD, SOFTWARE ENGINEER AT @XEBIA @THEGREENGREEK 

Next.js u Server-rendered by default u Automatic code splitting for faster page loads u Simple page-based client-side routing u Webpack-based dev environment, supporting hot module replacement u Customizable with your own Babel and Webpack configurations u Able to implement with Express or any other Node.js HTTP server BY ZEIT Next.js is a minimalistic framework for server-rendered or statically- exported React applications. @THEGREENGREEK 

How Does Next.js Work? INITIALIZING A NEW APP @THEGREENGREEK 

How Does Next.js Work? CREATING THE INDEX ROUTE AND PAGE @THEGREENGREEK 

How Does Next.js Work? CREATING ADDITIONAL ROUTES AND PAGES @THEGREENGREEK 

How Does Next.js Work? NAVIGATION @THEGREENGREEK 

How Does Next.js Work? LOADING DATA @THEGREENGREEK 

How Does Next.js Work? DYNAMIC ROUTES – QUERY STRINGS @THEGREENGREEK 

How Does Next.js Work? DYNAMIC ROUTES – ROUTE MASKS @THEGREENGREEK 

How Does Next.js Work? DYNAMIC ROUTES – CUSTOM API SERVER @THEGREENGREEK 

Next.js provides an easy solution to the complexity of Universal JS u Rapid set-up – preconfigured Webpack + Babel that is still customizable u Less bloat & less opinionated than Create React App u Minimal convention framework where routes are defined by files in a /pages/ folder u Automatic code-splitting for each page in /pages/ u Can further optimize with lazy-loading modules and components u Can asynchronously load anticipated pages after the current page has rendered u Developer writes one set of (universal) code that the app runs on server or client, whichever is best for the current situation @THEGREENGREEK 

Resources u About Next.js https://zeit.co/blog/next u GitHub repo https://github.com/zeit/next.js/ u Tutorial https://learnnextjs.com u New version 3.0 details https://zeit.co/blog/next3 u “7 Principles of Rich Web Applications” by Guillermo Rauch, the inspiration for Next.js https://rauchg.com/2014/7-principles-of-rich- web-applications DON’T READ THIS SLIDE, GO TO: http://bit.ly/siaspeaks ! @THEGREENGREEK 

Thanks! CODE AND SLIDES AT http://bit.ly/siaspeaks @THEGREENGREEK SIAKARAMALEGOS ! " #