Next.js: Next.js 9 with custom server(typescript)

[ktjd123]

Question about Next.js

before next9 it worked just fine but after upgrading it won't work is there solution for it??

the tsconfig.json file is

{
  "compilerOptions": {
    "outDir": "./build",
    "allowJs": true,
    "target": "esnext",
    "lib": ["es2015", "es2016", "es2017", "es2018", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "downlevelIteration": true,
    "sourceMap": true,
    "typeRoots": ["./@types", "./node_moduels/@types"],
    "baseUrl": "./",
    "paths": {
      "*": ["@types/*"]
    },
    "strict": true,
    "removeComments": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["./**/*"],
  "exclude": ["node_moduels", "./build"]
}

and package.json file is

 "d": "rm -rf build && cross-env NODE_ENV=development tsc-watch -p tsconfig.json --onSuccess \"node build/index.js\"",

and the error code is

Error: Cannot find module '/Users/peter/Server/theSeed/build/index.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

it won't build properly :(

[ktjd123]

the repository is https://github.com/ktjd123/theseed

[masives]

I've tried running the code and I'm quite confused. On successful tsc transpilation you're trying to start node server in the build directory (node build/index.js). However in the tsconfig you have a no-emit option set to true which makes tsc not emit any files to the build directory.

When no-emit is set to false there's no index.js file in the build directory (it's in the `build/server/index.js').

I see you're using a lot of mv and rm -rf commands along the build process which confuses me. Also you're removing .next directory and moving everything to build, Can you please tell me what's the purpose of each?

[ktjd123]

the next.js is changing my tsconfig.json file even if it exists perfectly. I was confused by that.

[ktjd123]

how can I disable this feature..?

[masives]

I see you asked question here https://github.com/zeit/next.js/issues/7979

Please also look at https://github.com/zeit/next.js/tree/canary/examples/custom-server-typescript

In my opinion your build process I way more complicated than it should be and development. Look at ts node - you might reduce complexity of it

[ktjd123]

Thank you for your advise I check it!

[pateketu]

custom-server-typescript example is great, but when running ts-node when you make changes to server/index.ts then it takes good 20-30 sec for the app to re-start as nextjs is deleting the .next folder content and re-generating it, any way to optimize rebuilding of nextjs folder when changes are not in any pages?

[andresgutgon]

+1 for what @pateketu is commenting. Also add that anything inside pages is refreshed when I make changes in those files. I understand nodemon is only checking server folder.

How changes on the client code are managed?

[andresgutgon]

I managed to have next js code hot reloaded by adding this to next.config.js

module.exports = {
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 800,
      aggregateTimeout: 300,
    }
    return config
  },
}

Important: I'm running my app in a Docker container with docker-compose.yml. So maybe this is not necessary if you're running the app in your machine.