Custom NextJS Server with Typescript

There is an official NextJS guide on how to create a custom server. However, it only works with JavaScript. Please follow their guide and come back.

https://nextjs.org/docs/advanced-features/custom-server

1. Rename server.js to server.ts.

2. Update the scripts in package.json

   "scripts": {
     "dev": "ts-node server.ts",
     "build": "next build",
     "start": "NODE_ENV=production ts-node server.ts"
   }
   

3. Install ts-node

   yarn add ts-node
   

4. Add this section in tsconfig.json

   {
     // ...
     "ts-node": {
       "transpileOnly": true,
       "compilerOptions": {
         "module": "commonjs"
       }
     }
   }