Learn how to use @netlify/next Advanced Middleware to transform the response of a statically generated page in Next.js.
MIT License
Next.js developers! Do you wish you could do MORE with middleware?
Do you want to be able to intercept and modify the response of a statically generated page based on geolocation data for example? Do you also want to be able to transform page data on the fly?
Now you can! With Next.js Advanced Middleware. Its powered by Netlify Edge Functions, brand new and only on Netlify.
With @netlify/next, you get access to enhanced request and response features through an intuitive API. Read more on the docs.
Make sure you've installed the Netlify CLI which brings the power of Next.js Advanced Middleware to your development environment.
Check you're on the latest version with the following command, and update if your package is not up to date!
netlify --version
Fork the repository to your GitHub account and clone it to your local machine.
Install dependencies:
npm install
Start the development server using the Netlify CLI:
netlify dev
And a browser tab will automatically open at http://localhost:8888.
You can start editing pages by modifying pages/index.js
or pages/static.js
. The pages auto-update as you edit the
files.
To experiment with the transformed response on pages/static.js
, open up middleware.ts
, and have fun!
Instantly deploy this tutorial site to your own Netlify account: