Rewrite HTML and transform page props in Next.js with Next.js Advanced Middleware — only on Netlify
Next.js developers, do you wish you could do more with middleware? What if instead of rewriting the URL of a page based on geolocation data, request headers or cookies, you could actually rewrite the HTML response and update the underlying page props as well? Even on a page built using getStaticProps?
Now you can! Introducing Next.js Advanced Middleware. It's powered by Netlify Edge Functions. It's brand new and only on Netlify.
In this tutorial we're going to use Next.js Advanced Middleware on Netlify to intercept a request to a statically pregenerated page in a new Next.js application, and rewrite the HTML response to change some text and page props based on geolocation data.
• Read the blog post: https://ntl.fyi/nextjs-rewrite-html-a...
• Check out the code repo: https://github.com/whitep4nth3r/nextj...
• Click around on the demo site: https://nextjs-advanced-middleware-de...
• Check you've got the latest version of the Netlify CLI: https://www.npmjs.com/package/netlify...
0:00 Intro
0:40 Tutorial outline
1:04 Check you've got everything you need
2:07 Bootstrap a new Next.js app
2:37 Add a new static route
3:52 Writing middleware in TypeScript
4:50 Use @netlify/next to rewrite HTML and update page props at The Edge
7:29 Set up version control with the GitHub CLI
8:07 Deploy to Netlify using the Netlify CLI
8:38 Find out more
#nextjs #netlify #webdev
---
Connect with Netlify:
Website: https://www.netlify.com/
Forums: https://answers.netlify.com/
Twitter: / netlify
LinkedIn: / netlify
Facebook: / netlify
Jamstack: https://jamstack.org/
Come help us build a better web! https://www.netlify.com/careers/
