WhoBuilt

Exporting & Deployment

Jul 3, 2020· 11 min· 15K views·Watch on YouTube

Speaker

Lee Robinson, a developer educator at Vercel, explains how to export and deploy Next.js applications using Now and Netlify.

Choose a deployment platform

Robinson recommends Now, made by Zeit, for its automatic framework detection, command line deployment, and Git hosting integrations. He also recommends Netlify, citing its interface and pricing, while saying he prefers Now.

Choose how to build and export

Pages without `getInitialProps` can be statically pre-rendered for faster page loads. Robinson describes `next export` as a way to produce standalone static HTML in an `out` folder, which his team copied into an existing .NET application to ship a feature quickly. For most projects, he favors `next build`, which supports static pages and API routes.

Preview changes from pull requests

Robinson demonstrates pushing a branch to GitHub and opening a pull request. Now automatically deploys a preview at a unique URL, so teammates and stakeholders can review changes before production. The workflow can also show deployment logs and run linting and tests.

Configure domains, secrets, and redirects

A `now.json` file can set the project name, domain aliases, build settings, and routes; Robinson uses routes to control caching of assets. He also describes uploading Firebase and Mailchimp secrets for use through `process.env`, and adding a 301 redirect after renaming his resume.

Takeaways

  • Use static pre-rendering where possible to improve page load times.
  • Choose `next export` when you need standalone HTML that can be copied into an existing application.
  • Use pull request previews to review deployed changes before merging to production.
  • Keep service credentials out of client code and provide them through environment variables.
  • Add redirects when URLs change so existing links continue to work.

Mentioned in this talk

Search inside this talk

What was claimed 11

Show all 11 facts

Related talks

Exporting & Deployment, Learn Next.js · WhoBuilt