By default, a NextJs middleware is run using the Edge runtime and from what I understand this is because the middleware is meant to be run on the edge network instead of the main server (being run on the edge network reduces the latency so this offers improved performance in some scenarios).
The downside of this is that the Edge runtime comes with some restrictions in terms of what it can run (list here).
My question is: is there any way to make a middleware run using the default runtime instead of the Edge runtime?
In my situation, we're not hosting anything on the edge so the Edge runtime imposes some restrictions on us without providing any benefits. A possible workaround would be to use a custom middleware instead of a NextJs one, but unless this is the only choice, I would rather use the NextJs middleware architecture & plumbing instead of building our own.
P.s.: We're using NextJs 12.1.6 (latest version at the moment of writing this question)
There's no way to do it at the moment, but it's being worked on. See RFC: Switchable Next.js Runtime
At the moment if you need node apis in your middleware you can work around the issue by making api routes that do stuff with node apis and then calling them from your middleware. You should definitely try that one out instead of making custom middleware with custom server I assume, since custom servers have limitations.
Next.js 13 added option to change the runtime, but I don't think the setting applies to middleware. The setting can be used to make everything run on the edge though. https://beta.nextjs.org/docs/rendering/edge-and-nodejs-runtimes#global-runtime-option
Now it's possible to determine at global and segment levels which runtime should be used with Next.js 13.
This configuration is for defining the runtime for global:
module.exports = {
experimental: {
runtime: 'experimental-edge', // 'node.js' (default) | experimental-edge
},
};
https://beta.nextjs.org/docs/rendering/edge-and-nodejs-runtimes#global-runtime-option
If you want to determine at the segment (aka server component) level, the only thing to do is export a runtime constant variable.
[app/layout.js]
export const runtime = 'experimental-edge'; // 'node.js' (default) | 'experimental-edge'
https://beta.nextjs.org/docs/rendering/edge-and-nodejs-runtimes#segment-runtime-option
Related
I have a Next.js 13 app that was deployed to the Edge on Cloudflare Pages with experimental: { runtime: 'experimental-edge' }, but requirements were updated and I need to include our feature flag dependency LaunchDarkly - and retrieve the feature flags via getServerSideProps.
Inside getServerSideProps I tried launchdarkly-node-server-sdk, launchdarkly-node-client-sdk, and launchdarkly-js-client-sdk, but they either require a Node specific library (fs and others) or window.
launchdarkly-cloudflare-edge-sdk with #cloudflare/kv-asset-handler looks promising, so I followed the template, but I'm not sure how to extend a Next.js app to have this functionality. For example, do I put the worker into a middleware.ts function or somehow extend the vercel build step to include this functionality.
I haven't tested this out but I am guessing you may need to use the Cloudflare SDK throughout since Cloudflare would deploy the functions as Cloudflare Workers, which is a non-Node runtime.
In a typical Next.js deployment, you'd use the Node server SDK for any server side code (like getServerSideProps) but my assumption is that this may cause errors due to the fact that it relies upon some Node-specific APIs that I am not sure the Workers runtime supports. We (LaunchDarkly) are working on updates to our JavaScript SDKs to better support non-Node runtimes but I don't have an ETA on their release.
I'm trying to share UI functionality between two Next.js apps, using ES modules.
I'm moving away from non-SSR apps using the SystemJS module format and wanting to avoid webpack's module federation scheme, hoping that the current standard ESM support across browsers and server is enough.
Next.js 11.1 blog post mentions work "on extensive ES Modules support in Next.js, both as input modules and as an output target" (emphasis added). However Next.js 12 post seems to focus only on importing ES modules.
I've tried using a custom webpack config, enabling config.experiments.outputModule, but it only affected the server side code (generated files in .next/server/pages did become ESM - breaking the build as expected with syntax errors). Using isServer to configure only the client side code seems to have no effect (code in .next/static stays the same).
Is this unsupported or am I doing something wrong? Thanks!
Is it possible to define different paths/routes from the same application to have different PWAs from the same NextJS app using next-pwa?
I read this thread and it's useful but while i'm working on next-pwa i don't figure out how to do it.
Since it's only one withPWA hoc that wraps next config i guess it's not possible?
Any ideas?
I am exploring the development with Web Components, more specifically, it's Fast. However, it would take a long time to rebuild the project and refresh the page, then verify for the CSS modification. Is there any CSS hot reload solution for the Web components(Fast)? (I am using Webpack)
There is no out-of-box solution for HMR with Web Components in General. It really depends on how you are using Web Components. Are you relying on just Custom Elements and using CSS-in-JS with it or fully using ShadowDOM with encapsulated styles and the underlying framework to declare those styles.
You can consider building your own HMR driver. To do this, you need all the three things in order for enable HMR - the bundler (assuming Webpack already has it), the server (webpack's dev server or middleware) and your own application.
In you own application, you would add the driver as:
// RUN SOME BOOSTRAPPING CODE
// HMR interface
if (module.hot) {
// Capture hot update for a particular module
module.hot.accept("./style.css", () => {
// Logic to remove old stylesheet
});
}
If you look at the above code, you can notice that it is almost impossible to change StyleSheet if it is defined within the shadow root for each component. If you have some global CSS which gets added to top Document then it simpler to implement HMR by manipulating StyleSheet objects from the javascript. At least, you will get partial HMR. For other activities, you can fall back to automatic full page refresh.
I've seen api-paste.ini as a conf file after installing openstack.
It looks like substituting some prefixes for python implementation but have no clue about this.
Here, my questions are:
What script is it?
it looks like very bizarre grammar like the following:
[composite:metadata]
use = egg:Paste#urlmap
/: meta
How does it work within python script?
See documentation for Paste Deploy.
The api-paste.ini is the configuration for the above web-services framework. Paste.deploy allows you to separate concerns between writing your application and middleware/filters from the composition of them into a web service. You define you WSGI applications and any middleware filters in the configuration file then you can compose pipelines which include the middleware/filters you want into your web-service, e.g. authentication, rate-limiting, etc.
You want to temporarily remove authentication, take it out of your pipeline and restart your web service.
The declaration above is declaring a composite application, but with only one application binding (a bit unnecessary - normally you would expect to see more than one binding, e.g. for different versions of the application). The WSGI application app:meta will be bound to / and you should have a declaration of app:meta later in the file. The implementation of the composite app is declared via the use and the egg:Paste#urlmap is a simple reference implementation.
You load this in your program with paste.deploy.loadwsgi.loadapp().
There is a proposal/recommendation(?) to move away from Paste Deploy/WebOb to WSME/Pecan see OpenStack Common WSGI