Share a Next.js dev server, with or without allowedDevOrigins

Since 16.2.0, next dev refuses requests for its dev resources from any origin it doesn't know, hot reload's socket included. Through a tunnel that passes the public origin on, the page loads but never updates. Add the host to allowedDevOrigins, or share with ouicu, which needs no change.

When the check came, version by version

The check guards /_next/ and /__nextjs, where the dev server keeps its scripts, its hot reload socket and its error overlay. It came with a security fix and has changed three times since; each version links to where it is written down:

We ran each of those against a hot reload socket from https://calm-otter-4821.ouicu.app, and the warning through to 16.1.7. From 15.2.4, setting allowedDevOrigins at all turns the warning into a refusal for the origins it leaves out.

What it lets in, in its docs' words: “The dev server already allows localhost, its subdomains, and the hostname it was started with.” An address on your Wi-Fi, like 192.168.1.20, isn't one of them.

The error messages, by version

From 16.2.0, the terminal running next dev prints:

Blocked cross-origin request to Next.js dev resource /_next/hmr from "calm-otter-4821.ouicu.app".

It goes on: “Cross-origin access to Next.js dev resources is blocked by default for safety.” The browser's request gets Unauthorized back, so hot reload never connects and edits never show. Before that, from 15.2.4, the same request only earned a warning:

Cross origin request detected from calm-otter-4821.ouicu.app to /_next/* resource. In a future major version of Next.js, you will need to explicitly configure "allowedDevOrigins" in next.config to allow this.

15.2.3 refused it, and said:

Blocked cross-origin request from calm-otter-4821.ouicu.app. To allow this, configure "allowedDevOrigins" in next.config

15.2.2 refused it without a word.

Allow an origin

List host names in next.config.ts, without https:// or a port, then restart next dev. A * stands for one label of the name, ** for several:

import type { NextConfig } from "next"; const nextConfig: NextConfig = {  allowedDevOrigins: ["*.ouicu.app", "192.168.1.20"],}; export default nextConfig;

Share next dev with ouicu

Start the dev server as usual, then share its port in a second terminal. Getting started has the install.

npm run dev# in a second terminalouicu share 3000

Nothing goes in next.config.ts. ouicu hands next dev each request for /_next/ and /__nextjs, and each WebSocket, with the origin http://localhost:3000: one it allows. Every other request keeps its real origin, so the check still keeps other sites out.

In 16.4.0, hot reload's socket is /_next/hmr. Through the link it connects to wss://calm-otter-4821.ouicu.app/_next/hmr, and an edit to app/page.tsx shows without a reload.

On your phone over Wi-Fi

next dev already listens on 0.0.0.0, every address, and its Network line shows yours. But from 16.2.0, a phone at http://192.168.1.20:3000 has its hot reload socket refused until that address is in allowedDevOrigins. A ouicu link skips both: scan the QR code it prints (QR codes). Both ways are in how to open localhost on your phone.

Server Actions errors

Server Actions have a check of their own. The docs:

ouicu sends X-Forwarded-Host with the public name, so a form with an action works through the link. Behind a proxy that sets Host to localhost and passes nothing on, the action fails with 500, and the terminal says:

`x-forwarded-host` header with value `localhost:3000` does not match `origin` header with value `calm-otter-4821.ouicu.app` from a forwarded Server Actions request. Aborting the action.

Then add the public name to the actions' own list, which takes the same * and **:

experimental: {  serverActions: { allowedOrigins: ["*.ouicu.app"] },},

Upload a static export

For a link that stays up with your laptop closed, export the site and upload it. Add output: "export" to next.config.ts, and next build writes it to out:

npm run buildouicu deploy out

The 16.4.0 starter can't export as it comes. It turns on cacheComponents and partialPrefetching, and the build stops with Error: Invariant: PPR cannot be enabled in export mode. Take both lines out and it builds.

Server Actions don't export either: “Features that require a Node.js server, or dynamic logic that cannot be computed during the build process, are not supported”. Share next dev for those. No --spa is needed: an upload answers /about with about.html, as the export writes it (Uploading a built site). For showing it to a client, see show a client a website before it goes live.