v2 of Next.js talk, workshop, and demo
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components
layouts
pages
static
.gitignore
next.config.js
package-lock.json
package.json
readme.md
server.js

readme.md

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 workshop and presentation explores what it all means and how to easily build universal or statically exported 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.

Video

Here is the video of the conference talk: https://www.youtube.com/watch?v=iIBLo-yq_2I

The slides got a little off in video production, so it might be easier to follow along with the slide link below...

Slides

Next.js Workshop Demo

Deployed application

  • Find the deployed application here
  • Find the statically exported application here

Branches by step

The code in this repo was used in the demo. Each branch represents a step in building the application:

  • 1-pages-static - Creating routes/pages and using static files. Also contains styling and <head> examples.
  • 2-navigation - Using <Link> plus a shared layout example.
  • 3-loading-data - Loading initial data with getInitialProps
  • 4-dynamic-routes - Setting up dynamic routes using query strings
  • 5-route-masking - Mask films routes for prettier urls
  • 6-custom-server - Setting up custom server to make pretty urls work on refresh
  • 7-static-export - Statically export to pre-rendered HTML pages
  • 8-loading - Add a loading bar indicator at top of screen hooking into Next.js' Router API

Explanation of Scripts

These scripts are for the fully implemented demo. Different steps in building the app have different scripts.

  • dev - runs the custom API server.js file in development mode
  • build - generate the production application to be deployed to a served environment
  • start - run the production application from the custom API server.js file,
  • export - generate the static export in development mode
  • dev-static - serve the contents of the static export folder on localhost:8080
  • deploy - generate the gh-pages production static export and deploy it to gh-pages, including the .nojekyll dotfile

Resources

Continue your learning with these resources and tutorials:

Social Media & Speaking

You can follow me on Twitter and Medium!

Interested in having me speak at your event? Check out my speaking history and/or my website.