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.
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...
- You can find the talk slides here: https://siakaramalegos.github.io/nextjs-talk-slides/
- Check out the workshop slides here: https://siakaramalegos.github.io/nextjs-workshop-slides/
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 withgetInitialProps4-dynamic-routes- Setting up dynamic routes using query strings5-route-masking- Mask films routes for prettier urls6-custom-server- Setting up custom server to make pretty urls work on refresh7-static-export- Statically export to pre-rendered HTML pages8-loading- Add a loading bar indicator at top of screen hooking into Next.js' Router API
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 modebuild- generate the production application to be deployed to a served environmentstart- run the production application from the custom API server.js file,export- generate the static export in development modedev-static- serve the contents of the static export folder on localhost:8080deploy- generate the gh-pages production static export and deploy it to gh-pages, including the.nojekylldotfile
Continue your learning with these resources and tutorials:
- About Next.js https://zeit.co/blog/next
- Next.js GitHub repo
- Official Tutorial by Zeit
- New version 5.0 details on the Zeit blog
- 7 Principles of Rich Web Applications by Guillermo Rauch, the inspiration for Next.js
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.