[Docs] Migrate using-preact example to typescript (#40295)

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

examples/using-preact/next.config.js

@@ -1,5 +1,8 @@
 const withPreact = require('next-plugin-preact')
 
-module.exports = withPreact({
+/** @type {import('next').NextConfig} */
+const nextConfig = {
   /* regular next.js config options here */
-})
+}
+
+module.exports = withPreact(nextConfig)

examples/using-preact/package.json

@@ -5,14 +5,18 @@
     "build": "next build",
     "start": "next start"
   },
-  "devDependencies": {},
   "dependencies": {
-    "next": "^12.0.0",
-    "next-plugin-preact": "^3.0.6",
-    "preact": "^10.5.15",
-    "preact-render-to-string": "^5.1.19",
-    "react": "npm:@preact/compat@^17.0.2",
-    "react-dom": "npm:@preact/compat@^17.0.2",
-    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.2.0"
+    "next": "latest",
+    "next-plugin-preact": "latest",
+    "preact": "^10.10.6",
+    "preact-render-to-string": "^5.2.3",
+    "react": "npm:@preact/compat@^17.1.1",
+    "react-dom": "npm:@preact/compat@^17.1.1",
+    "react-ssr-prepass": "npm:preact-ssr-prepass@1.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.15",
+    "@types/react": "16.9.17",
+    "typescript": "4.8.2"
   }
 }

examples/using-preact/pages/about.js

@@ -1,3 +0,0 @@
-export default function About() {
-  return <div>About us</div>
-}

examples/using-preact/pages/about.tsx

@@ -0,0 +1,3 @@
+export default function AboutPage() {
+  return <div>About us</div>
+}

examples/using-preact/pages/index.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link'
 
-export default function Home() {
+export default function IndexPage() {
   return (
     <div>
       Hello World.{' '}

examples/using-preact/pages/ssg.js

@@ -1,9 +0,0 @@
-export default function SSG({ framework }) {
-  return <div>{framework} ssg example</div>
-}
-
-export function getStaticProps() {
-  return {
-    props: { framework: 'preact' },
-  }
-}

examples/using-preact/pages/ssg.tsx

@@ -0,0 +1,13 @@
+import { InferGetStaticPropsType } from 'next'
+
+export function getStaticProps() {
+  return {
+    props: { framework: 'preact' },
+  }
+}
+
+export default function SSGPage({
+  framework,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return <div>{framework} ssg example</div>
+}

examples/using-preact/pages/ssr.js

@@ -1,9 +0,0 @@
-export default function SSR({ framework }) {
-  return <div>{framework} ssr example</div>
-}
-
-export function getServerSideProps() {
-  return {
-    props: { framework: 'preact' },
-  }
-}

examples/using-preact/pages/ssr.tsx

@@ -0,0 +1,13 @@
+import { InferGetServerSidePropsType } from 'next'
+
+export function getServerSideProps() {
+  return {
+    props: { framework: 'preact' },
+  }
+}
+
+export default function SSRPage({
+  framework,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return <div>{framework} ssr example</div>
+}

examples/using-preact/tsconfig.json

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