常連

### TypeScriptで記述したNext.jsをExpressのミドルウェアにしたい
こんにちは。現在「実践TypeScript 吉井健文著」という書籍でTypeScriptを学習しているものです。
その書籍中の１０章10-3-3においてまず下記のsrc/server/index.tsでNext.jsをインポートしたserverのエントリーポイントでnextAppインスタンスを生成する。この場合はnextAppインスタンス生成時の設定で、ベースディレクトリをsrc/clientに指定する。


次にExpressがRedis Storeに接続するミドルウェアを下記(src/server/session.ts)のように設定をする。


ここまでで、Next.jsアプリケーションがマウントされたExpressサーバーを構築することができました。yarn devでサーバーを起動してアプリケーションが動いているのを確認する。しかし以下のようなエラーがでた。

### 発生している問題・エラーメッセージ

```
yamashitajunichinoMacBook-Pro:ts-nextjs-express-master yamajon$ yarn dev
yarn run v1.22.4
warning package.json: "dependencies" has dependency "@types/next" with range "^8.0.3" that collides with a dependency in "devDependencies" of the same name with version "8.0.3"
$ ts-node src/server/index.ts

/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/ts-node/src/index.ts:226
    return new TSError(diagnosticText, diagnosticCodes)
           ^
TSError: ⨯ Unable to compile TypeScript:
src/server/index.ts:13:26 - error TS2339: Property 'getRequestHandler' does not exist on type 'DevServer'.

13   const handle = nextApp.getRequestHandler()
                            ~~~~~~~~~~~~~~~~~
src/server/index.ts:14:17 - error TS2339: Property 'prepare' does not exist on type 'DevServer'.

14   await nextApp.prepare()
                   ~~~~~~~
src/server/index.ts:24:42 - error TS2345: Argument of type '(err: Errback) => void' is not assignable to parameter of type '() => void'.

24   app.listen(ENV.APP_PORT, ENV.APP_HOST, (err: Express.Errback) => {
                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~

    at createTSError (/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/ts-node/src/index.ts:226:12)
    at getOutput (/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/ts-node/src/index.ts:335:40)
    at Object.compile (/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/ts-node/src/index.ts:368:11)
    at Module.m._compile (/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/ts-node/src/index.ts:414:43)
    at Module._extensions..js (internal/modules/cjs/loader.js:1272:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/ts-node/src/index.ts:417:12)
    at Module.load (internal/modules/cjs/loader.js:1100:32)
    at Function.Module._load (internal/modules/cjs/loader.js:962:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at Object.<anonymous> (/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/ts-node/src/bin.ts:151:12)
error Command failed with exit code 1.
```

### 該当のソースコード
src/server/index.tsにおいてvscodeでコメントアウトのようなエラーがでていた

src/server/index.ts
```typescript
import Express from 'express'
import next from 'next'
import session from './session'
import * as ENV from '../constants'
// ______________________________________________________
//
const dev = process.env.NODE_ENV !== 'production'
  // ______________________________________________________
  //
;(async () => {
  const app = Express()
  const nextApp = next({ dev, dir: './src/client' })
  const handle = nextApp.getRequestHandler()
  //プロパティ 'getRequestHandler' は型 'DevServer' に存在しません。
  await nextApp.prepare()
  //プロパティ 'prepare' は型 'DevServer' に存在しません。
  
  session(app)
  
  app.use((req, res) => {
    
    handle(req, res)
  })
  app.listen(ENV.APP_PORT, ENV.APP_HOST, (err: Express.Errback) => {
    //この呼び出しに一致するオーバーロードはありません。
    //   6 中 1 のオーバーロード, '(port: number, hostname: string, backlog: number, callback?: (() => void) | undefined): Server' により、次のエラーが発生しました。
    //   型 '(err: Express.Errback) => void' の引数を型 'number' のパラメーターに割り当てることはできません。
    // 6 中 2 のオーバーロード, '(port: number, hostname: string, callback?: (() => void) | undefined): Server' により、次のエラーが発生しました。
    //   型 '(err: Express.Errback) => void' の引数を型 '() => void' のパラメーターに割り当てることはできません。ts(2769)
    if (err) throw err
    console.log(`Running on http://${ENV.APP_HOST}:${ENV.APP_PORT}`)
  })
})()

```

同様にsrc/server/session.tsのconnectRedis(session)においてもvscode上でエラーが出ていた。

src/server/session.ts
```typescript
import Express from 'express'
import session from 'express-session'
import connectRedis from 'connect-redis'
import { REDIS_HOST, REDIS_PORT } from '../constants'

export default (app: Express.Application) => {
  const RedisStore = connectRedis(session)
  // 型 'typeof session' の引数を型 '(options?: SessionOptions | undefined) => RequestHandler<ParamsDictionary, any, any, ParsedQs>' のパラメーターに割り当てることはできません。
  // パラメーター 'options' および 'options' は型に互換性がありません。
  // 型 'import("/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/@types/connect-redis/node_modules/@types/express-session/index").SessionOptions | undefined' を型 'import("/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/@types/express-session/index").SessionOptions | undefined' に割り当てることはできません。
  // 型 'import("/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/@types/connect-redis/node_modules/@types/express-session/index").SessionOptions' を型 'import("/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/@types/express-session/index").SessionOptions' に割り当てることはできません。
  // プロパティ 'store' の型に互換性がありません。
  // 型 'import("/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/@types/connect-redis/node_modules/@types/express-session/index").Store | import("/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/@types/connect-redis/node_modules/@types/express-session/index").MemoryStore | und...' を型 'import("/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/@types/express-session/index").Store | import("/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/@types/express-session/index").MemoryStore | undefined' に割り当てることはできません。
  // 型 'MemoryStore' を型 'Store | MemoryStore | undefined' に割り当てることはできません。
  // 型 'import("/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/@types/connect-redis/node_modules/@types/express-session/index").MemoryStore' を型 'import("/Users/yamajon/Desktop/JS_practice/ts-nextjs-express-master/node_modules/@types/express-session/index").MemoryStore' に割り当てることはできません。
  // プロパティ 'all' の型に互換性がありません。
  // 型 '((callback: (err: any, obj?: SessionData[] | { [sid: string]: SessionData; } | null | undefined) => void) => void) | undefined' を型 '(callback: (err: any, obj?: { [sid: string]: SessionData; } | null | undefined) => void) => void' に割り当てることはできません。
  //型 'undefined' を型 '(callback: (err: any, obj?: { [sid: string]: SessionData; } | null | undefined) => void) => void' に割り当てることはできません。ts(2345)
  const option = {
    store: new RedisStore({
      host: REDIS_HOST,
      port: REDIS_PORT

    }),
    secret: 'keyboard cat',
    resave: false
  }
  app.use(session(option))
}
```

constantsは以下の通り
src/constants.ts
```typescript
export const APP_HOST = 'localhost'
export const REDIS_HOST = 'localhost'
export const APP_PORT = 3000
export const REDIS_PORT = 6379
```
npm installで使用したpackage.jsonは以下のものです
```json
{
  "name": "ts-nextjs-express",
  "version": "1.0.0",
  "author": "takepepe",
  "private": true,
  "scripts": {
    "dev": "ts-node src/server/index.ts",
    "redis": "ts-node src/redis/index.ts",
    "prettier": "prettier \"src/**/*.ts*\" --write"
  },
  "dependencies": {
    "@types/connect-redis": "0.0.9",
    "@types/next": "^8.0.3",
    "axios": "^0.20.0",
    "body-parser": "1.18.3",
    "connect-redis": "3.4.1",
    "cookie-parser": "1.4.4",
    "express": "4.16.4",
    "express-session": "1.16.0",
    "next": "^8.0.3",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "redis-server": "1.2.2",
    "styled-components": "4.2.0"
  },
  "devDependencies": {
    "@types/axios": "0.14.0",
    "@types/body-parser": "1.19.0",
    "@types/cookie-parser": "1.4.1",
    "@types/express": "4.16.1",
    "@types/express-session": "1.15.12",
    "@types/node": "11.13.4",
    "@types/react": "16.8.13",
    "@types/next": "8.0.3",
    "@types/react-dom": "16.8.3",
    "@types/styled-components": "4.1.14",
    "@zeit/next-typescript": "1.1.1",
    "prettier": "1.16.4",
    "ts-node": "8.0.3",
    "typescript": "3.4.3",
    "webpack": "4.29.6",
    "webpack-cli": "^3.3.12",
    "webpack-node-externals": "1.7.2"
  },
  "prettier": {
    "semi": false,
    "singleQuote": true
  }
}
```
プロジェクト構成は以下の通りです。
｜＿package.json
｜＿src
｜　｜____redis
｜　｜　　　｜_index.ts

｜　｜____server
｜　｜　　　｜_index.ts
｜　｜　　　｜_session.ts
｜　｜
｜　｜_constant.ts
｜
｜＿node_modeles
｜　｜　　
｜　｜_express
｜　｜_express-session
｜　｜_connect-redis
｜　｜_next
｜
｜_next.config.js
｜＿tsconfig.json
｜＿yarn.lock
### 試したこと
まずプロパティ 'getRequestHandler' 、'prepare'は型 'DevServer' に存在しないことを確認してみた。node_module/@types/next/index.d.tsにDevServerは存在したが確かにgetRequestHandler,prepareは存在していなかった。


書籍にはこのコードで問題なく起動すると書いてあったので、自分と違うところがあるとすれば、書籍が書かれた当時の@types/nextのversionと自分が使っている@types/nextのversionが違うのではないかという予測をたて、自分が使っているversionを開発に使用しているディレクトリ上でnpm view @types/next versionで確かめてみたところ、最新バージョン9.0.0が使用されており、なぜかじぶんがpackage.jsonで指定したversion8.3.0が使用されていなかった。
そこでnpm install  @types/next@8.0.3でversionを8.0.3にダウングレードさせようとしたが変更できなかった。変更できない理由はそのディレクトリのみversionを引き下げることができないことと思われ、グローバルに変更する必要がありそうなのだが、他のアプリでは最新バージョンのnextを使用しているのでなるべくグローバルに変更したくはない。
よろしければ、どこをどのように修正すればよいと考えられるのか、ご教授いただけると幸いです。もしvesionが問題なのであればグローバルにversionを変更せず、限られたディレクトリ内で低いversionのmoduluを使用する方法もよろしけば教えてください。
###補足情報
環境はmacでエディタはVScodeを使用しています、
ソースコードは著者の方がGitHubで公開しているものを使わせてもらいました
https://github.com/takefumi-yoshii/ts-nextjs-express

	@@ -1,1 +1,1 @@
1	- Next.jsをExpressのミドルウェアとして使いたい
1	+ Next.jsがExpressのミドルウェアとして起動しない

質問編集履歴