Easier way to inject functionality from "plugins"

[theoephraim]

Goals

We don't really have a true plugin system (which could be another great feature of its own) - but if you consider a function that modifies the next config as a plugin, then it is adding more functionality to the next config itself which would open up these possibilities for plugin authors.

Currently this can only be done via webpack plugins and it is extremely awkward and difficult. This would allow the plugin to inject functionality without requiring the user to take further setup steps, and import/call additional dependencies all over the place.

Things I'd like to be able to do

• inject arbitrary code/scripts into each environment/runtime (browser/edge/serverless/node)
• proper middleware - being able to hook into the rendered response, rather than just redirecting
• add new routes
• generally adding more hooks throughout the build process (there are a few requests/discussions related to this)

Aside from making things much simpler (and more consistent), this would also ensure this kind of functionality works during the migration to turbopack, as the modifications done via webpack plugins will likely not work.

Also note that you can inject some basic things via middleware.ts and instrumentation.ts but it is very limited and still requires the user to set more things up rather than just installing a plugin.

Non-Goals

No response

Background

Check out the Astro integrations api

Particularly how you can easily

• add a middleware
• add routes
• inject scripts

Proposal

Probably would set it up very similarly to the astro config + integrations.