App router with custom server?

[mdj-uk]

Can we use the app router with a custom server, like we can with pages? I'm guessing not, seeing as I can't get it to work and I don't see any mention of it in the docs. Equally I don't see any reference to it not being possible.

[shuding]

It should work with latest canary.

[mdj-uk]

Thanks!

[LuHua10]

It should work with latest canary.

Is the version you mentioned v13.4.5-canary.7?
Because I am still encountering the "404 This page could not be found." issue in this version.

[johnson-elugbadebo]

Hi guys, I can't seem to get a custom Express.js server to work with the App Router. I keep getting a ECONREFUSED error. Have scoured the internet and ChatGPT to figure out the fix and am coming up empty. The example custom server on the Next.js Github repo doesn't use Express. Can you point me to an example with Express.js + App Router?

[mdj-uk]

Hi @johnson-elugbadebo
Can't remember how I ever found it, but there's an official next + express example here:
https://stackblitz.com/edit/github-6mzuef?file=server.js Note it uses pages with next v12.

Here's my fork which updates to next 13 and uses app router:
https://stackblitz.com/edit/github-6mzuef-r5bkvo?file=app%2Fpage.js

[HoldUpFjord]

Coming here after the fact and just wanted to say thank you for the App router update!

[mdj-uk]

One gotcha I came across:

When following the example in the docs I had

const app = next({ dev, hostname, port })

where I'd actually made a mistake with one of the config options, I think hostname. In pages I got away with it without any error. In app router it caused a crash. So I thought it was a problem with app router but it was actually just my incorrect config.

[johnson-elugbadebo]

Hi @mdj-uk ,

Thanks for the reply! I finally got it to work. I spent 2 days trying to figure this out.... The mistake I was making was that I was not passing hostname and port when declaring the next app in the server.js file, as in const app = next({ dev, hostname, port })

I was just passing "dev". Also, I had to define hostname like so: const hostname = '127.0.0.1'

Declaring it as they provide in the docs, like so const hostname = 'localhost' did not work for me.

What caused the confusion is the custom server example they provide in the next.js docs are listed under the "Pages Router", not "App Router".

I wish the documentation was clearer. Thanks again!

[Blankeos]

const hostname = '127.0.0.1' definitely worked. Thanks!

[Inzendis]

Where do you place the the server.ts? I found a guide for cron jobs and I need to do a custom server like this and I mostly follow it, but I get
Error: Cannot find module 'C:\Users\xxxx\Documents\xxxxxx\xxxxProjectxxx\server.ts'
at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
at Module._load (node:internal/modules/cjs/loader:922:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:86:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

Node.js v18.18.0

Im using imports so I need to put it inside app directory but the examples here are different.

Found out I needed to use Node.js v20.0.0 > for cron-async, but I still have the same error that it can't find server.ts

Edit: Solved it, and cron jobs are working. Now I facing that if I'm not using on the scripts dev : next dev then I don't see changes.

Would be great if I could do "dev": "next dev && ts-node server.ts",

[BossBele]

Adding const app = next({ dev, hostname, port }) worked for me

[itorz7]

$ bun run --hot index.ts
INFO [28-04-2024 21:04:07] (25244): Listening on port http://localhost:3000
○ Compiling / ...
✓ Compiled / in 3.1s (433 modules)
error: Cannot find module "C:\Users\project\next.next\server\middleware-manifest.json" from "undefined"
error: Cannot find module "../lib/picocolors" from "undefined"
GET / 500 in 3162ms