Universal React Apps Using Next.js (from React Next)

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Who Am I? @THEGREENGREEK SIAKARAMALEGOS ! " #

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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 React applications.

Slide 7

Slide 7 text

How Does Next.js Work? INITIALIZING A NEW APP

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

How Does Next.js Work? NAVIGATION

Slide 11

Slide 11 text

How Does Next.js Work? LOADING DATA

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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: https://github.com/siakaramalegos/nextjs-talk #

Slide 17

Slide 17 text

Thanks! CODE AND SLIDES AT https://github.com/siakaramalegos/nextjs-talk @THEGREENGREEK SIAKARAMALEGOS ! " #