Convert analyze-bundles example to TypeScript

examples/analyze-bundles/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.

examples/analyze-bundles/next.config.js

@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 })

examples/analyze-bundles/package.json

@@ -8,14 +8,18 @@
     "serve": "serve .next/analyze"
   },
   "dependencies": {
-    "@next/bundle-analyzer": "^9.1.4",
-    "cross-env": "^6.0.3",
-    "faker": "^4.1.0",
+    "@faker-js/faker": "^7.3.0",
+    "@next/bundle-analyzer": "^12.1.6",
+    "cross-env": "^7.0.3",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "serve": "^11.3.2"
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "serve": "^13.0.2",
+    "typescript": "^4.7.4"
   }
 }

examples/analyze-bundles/pages/about.tsx

@@ -0,0 +1,5 @@
+const About = () => {
+  return <div>About us</div>
+}
+
+export default About

examples/analyze-bundles/pages/contact.js → examples/analyze-bundles/pages/contact.tsx

@@ -1,3 +1,5 @@
-export default function Contact() {
+const Contact = () => {
   return <div>This is the contact page.</div>
 }
+
+export default Contact

examples/analyze-bundles/pages/index.js → examples/analyze-bundles/pages/index.tsx

@@ -1,7 +1,12 @@
+import { NextPage, GetStaticProps } from 'next'
 import Link from 'next/link'
-import faker from 'faker'
+import { faker } from '@faker-js/faker'
 
-const Index = ({ name }) => {
+type IndexProps = {
+  name: string
+}
+
+const Index: NextPage<IndexProps> = ({ name }) => {
   return (
     <div>
       <h1>Home Page</h1>
@@ -17,7 +22,7 @@ const Index = ({ name }) => {
 
 export default Index
 
-export async function getStaticProps() {
+export const getStaticProps: GetStaticProps = async () => {
   // The name will be generated at build time only
   const name = faker.name.findName()
 

examples/analyze-bundles/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}