diff --git a/examples/custom-server-hapi/next-env.d.ts b/examples/custom-server-hapi/next-env.d.ts
new file mode 100644
index 000000000000..4f11a03dc6cc
--- /dev/null
+++ b/examples/custom-server-hapi/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/custom-server-hapi/next-wrapper.js b/examples/custom-server-hapi/next-wrapper.js
deleted file mode 100644
index 431191084fa8..000000000000
--- a/examples/custom-server-hapi/next-wrapper.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const nextHandlerWrapper = (app) => {
-  const handler = app.getRequestHandler()
-  return async ({ raw, url, query }, h) => {
-    url.query = query
-    await handler(raw.req, raw.res, url)
-    return h.close
-  }
-}
-
-const pathWrapper =
-  (app, pathName, opts) =>
-  async ({ raw, query, params }, h) => {
-    const html = await app.render(
-      raw.req,
-      raw.res,
-      pathName,
-      { ...query, ...params },
-      opts
-    )
-    return h.response(html).code(raw.res.statusCode)
-  }
-
-module.exports = {
-  pathWrapper,
-  nextHandlerWrapper,
-}
diff --git a/examples/custom-server-hapi/nodemon.json b/examples/custom-server-hapi/nodemon.json
new file mode 100644
index 000000000000..c9fa4132a155
--- /dev/null
+++ b/examples/custom-server-hapi/nodemon.json
@@ -0,0 +1,5 @@
+{
+  "watch": ["server"],
+  "exec": "ts-node --project tsconfig.server.json server/server.ts",
+  "ext": "js ts"
+}
diff --git a/examples/custom-server-hapi/package.json b/examples/custom-server-hapi/package.json
index 6de2563a24e1..60b0362bd7c6 100644
--- a/examples/custom-server-hapi/package.json
+++ b/examples/custom-server-hapi/package.json
@@ -1,15 +1,24 @@
 {
   "private": true,
   "scripts": {
-    "dev": "node server.js",
-    "build": "next build",
-    "start": "cross-env NODE_ENV=production node server.js"
+    "dev": "nodemon",
+    "build": "next build && tsc --project tsconfig.server.json",
+    "start": "cross-env NODE_ENV=production node dist/server.js"
   },
   "dependencies": {
-    "@hapi/hapi": "^18.3.1",
-    "cross-env": "^5.2.0",
+    "@hapi/hapi": "^20.2.1",
+    "cross-env": "^7.0.3",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/hapi__hapi": "^20.0.10",
+    "@types/node": "^16.11.25",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "nodemon": "^2.0.15",
+    "ts-node": "^10.5.0",
+    "typescript": "^4.5.5"
   }
 }
diff --git a/examples/custom-server-hapi/pages/a.js b/examples/custom-server-hapi/pages/a.tsx
similarity index 100%
rename from examples/custom-server-hapi/pages/a.js
rename to examples/custom-server-hapi/pages/a.tsx
diff --git a/examples/custom-server-hapi/pages/b.js b/examples/custom-server-hapi/pages/b.tsx
similarity index 100%
rename from examples/custom-server-hapi/pages/b.js
rename to examples/custom-server-hapi/pages/b.tsx
diff --git a/examples/custom-server-hapi/pages/index.js b/examples/custom-server-hapi/pages/index.tsx
similarity index 100%
rename from examples/custom-server-hapi/pages/index.js
rename to examples/custom-server-hapi/pages/index.tsx
diff --git a/examples/custom-server-hapi/server/next-wrapper.ts b/examples/custom-server-hapi/server/next-wrapper.ts
new file mode 100644
index 000000000000..596aac18c613
--- /dev/null
+++ b/examples/custom-server-hapi/server/next-wrapper.ts
@@ -0,0 +1,16 @@
+import type { NextServer } from 'next/dist/server/next'
+import type { Lifecycle } from '@hapi/hapi'
+import type { NextUrlWithParsedQuery } from 'next/dist/server/request-meta'
+
+const nextHandlerWrapper = (app: NextServer): Lifecycle.Method => {
+  const handler = app.getRequestHandler()
+
+  return async ({ raw, url, query }, h) => {
+    const nextUrl = url as unknown as NextUrlWithParsedQuery
+    nextUrl.query = query
+    await handler(raw.req, raw.res, nextUrl)
+    return h.close
+  }
+}
+
+export { nextHandlerWrapper }
diff --git a/examples/custom-server-hapi/server.js b/examples/custom-server-hapi/server/server.ts
similarity index 81%
rename from examples/custom-server-hapi/server.js
rename to examples/custom-server-hapi/server/server.ts
index 90101efe9d8e..ea7dc52ef78e 100644
--- a/examples/custom-server-hapi/server.js
+++ b/examples/custom-server-hapi/server/server.ts
@@ -1,6 +1,6 @@
-const next = require('next')
-const Hapi = require('@hapi/hapi')
-const { /* pathWrapper, */ nextHandlerWrapper } = require('./next-wrapper')
+import next from 'next'
+import Hapi from '@hapi/hapi'
+import { nextHandlerWrapper } from './next-wrapper'
 
 const port = parseInt(process.env.PORT, 10) || 3000
 const dev = process.env.NODE_ENV !== 'production'
diff --git a/examples/custom-server-hapi/tsconfig.json b/examples/custom-server-hapi/tsconfig.json
new file mode 100644
index 000000000000..fe57f7dbf638
--- /dev/null
+++ b/examples/custom-server-hapi/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": ".",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/custom-server-hapi/tsconfig.server.json b/examples/custom-server-hapi/tsconfig.server.json
new file mode 100644
index 000000000000..0cf1e05d407a
--- /dev/null
+++ b/examples/custom-server-hapi/tsconfig.server.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "dist",
+    "lib": ["es2019"],
+    "target": "es2019",
+    "isolatedModules": false,
+    "noEmit": false
+  },
+  "include": ["server/**/*.ts"]
+}