Guide · Next.js
Share a Next.js app from localhost
1. Start Next.js
Run the dev server as usual. It listens on port 3000 unless that port is busy — use the port it prints.
$ npm run dev2. Share port 3000
In a second terminal, in the same project folder:
$ npx localians share 3000The first time, your browser opens once so you can approve this computer. The command then prints an HTTPS link on preview.localians.com. Keep the command running while you share; press Ctrl+C to stop.
3. Allow hot reload for your preview link
Next.js only serves its development resources (like the hot reload connection) to origins you allow. Add the Localians preview domain to next.config.ts, then restart next dev:
$ allowedDevOrigins: ["*.preview.localians.com"]Pages load without it, but your viewers won't see edits until they reload.
What your app sees
- Requests arrive with
Host: localhost:3000, so nothing in your app needs to know about the preview. - The preview's real address is in
X-Forwarded-HostandX-Forwarded-Proto(https), for code that builds absolute URLs. - If your app must see the public host itself, run
npx localians share 3000 --host-header preserve.
Before you send the link
- Protect client work with a password: visitors enter it before they see anything. See preview security.
- Use test data. A preview runs your development app with your local environment variables.
- Several apps? Share each port separately, for example a Next.js front end on 3000 and an API on 4000.
Other frameworks: Vite and more framework guides.
Questions
Why does the page load but not update live?
Next.js blocks its development endpoints for origins it doesn't know, which stops hot reload for visitors. Add *.preview.localians.com to allowedDevOrigins in next.config and restart next dev.
Does it work with the App Router, API routes and middleware?
Yes. Visitors' requests reach your dev server like any other browser request, so pages, route handlers, middleware and WebSockets behave as they do on localhost.
My sign-in redirects back to localhost. What do I change?
Auth libraries build callback URLs from their configured base URL. While you share, set it to your preview link (and add that link to your OAuth app's allowed redirect URLs), or test sign-in locally.
Should I share next dev or a production build?
next dev is best for collaborating on changes. For a client demo, next build && next start is faster and closer to what you'll ship; share port 3000 the same way.
Share your first preview in about a minute.
Free to start with a 24-hour preview per project. No credit card, nothing to deploy.