siakaramalegos/nextjs-talk

Basic Next.js application used for my Universal React Apps Using Next.js talk

Universal React Apps Using Next.js

Every user’s hardware is different, and processing speed can hinder user experience on client-side rendered React applications. Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do. It’s easy to get lost in the lingo, so this presentation explores what it all means and how to easily build universal React apps using the Next.js framework. I walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this if you’re comfortable with React and ES6 syntax.

Slides

You can find the slides from my React Next talk at JazzCon and React Dev Summit here, and in Tel Aviv at React Next here. If you went to the Front-End Party meetup in New Orleans, those slightly different slides can be found here!

Code Samples

This repo contains the code samples that I used in the talk. The master branch contains all the code, but you can also check out the step-x branches for each step presented:

• step-0: Initializing a new Next.js application
• step-1: Creating the index route and page
• step-2: Creating additional routes and pages
• step-3: Navigation
• step-4: Loading data
• step-5: Dynamic routes
• step-6: Route masking (client)
• step-7: Route masking (server)

step-8 upgraded to React 16 and Next.js 5.

Resources

If you just want the list of resources to learn more, here they are:

• About Next.js https://zeit.co/blog/next
• GitHub repo https://github.com/zeit/next.js/
• Tutorial https://learnnextjs.com
• New version 4.0 details https://zeit.co/blog/next4
• “7 Principles of Rich Web Applications” by Guillermo Rauch, the inspiration for Next.js https://rauchg.com/2014/7-principles-of-rich-web-applications

Follow

Feel free to follow me on Twitter and Medium!