chore: refactor using-router example (#40774)

## Changes

- Updated dependencies
- Migrated to Typescript
- Added additional router use cases

## 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/examples/adding-examples.md)

examples/using-router/components/CustomLink.tsx

@@ -0,0 +1,47 @@
+import { useRouter } from 'next/router'
+import { useEffect, ReactNode, HTMLAttributes } from 'react'
+
+type CustomLinkProps = {
+  children: ReactNode
+  href: string
+  prefetch?: boolean
+  replace?: boolean
+  shallow?: boolean
+} & HTMLAttributes<HTMLAnchorElement>
+
+// typically you want to use `next/link` for this usecase
+// but this example shows how you can also access the router
+// and use it manually
+export default function CustomLink({
+  children,
+  href,
+  prefetch = false,
+  replace = false,
+  shallow = false,
+  ...props
+}: CustomLinkProps) {
+  const router = useRouter()
+
+  useEffect(() => {
+    if (prefetch) {
+      router.prefetch(href)
+    }
+  }, [router, href, prefetch])
+
+  return (
+    <a
+      {...props}
+      href={href}
+      onClick={(event) => {
+        event.preventDefault()
+        if (replace) {
+          router.replace(href, undefined, { shallow })
+        } else {
+          router.push(href, undefined, { shallow })
+        }
+      }}
+    >
+      {children}
+    </a>
+  )
+}

examples/using-router/components/Header.tsx

@@ -0,0 +1,14 @@
+import CustomLink from './CustomLink'
+
+export default function Header() {
+  return (
+    <header>
+      <nav>
+        <CustomLink href="/">Home</CustomLink>{' '}
+        <CustomLink href="/about" prefetch>
+          About
+        </CustomLink>
+      </nav>
+    </header>
+  )
+}

examples/using-router/package.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

examples/using-router/pages/about.js → examples/using-router/pages/about.tsx

@@ -1,10 +1,10 @@
 import Header from '../components/Header'
 
-export default function About() {
+export default function AboutPage() {
   return (
-    <div>
+    <>
       <Header />
       <p>This is the about page.</p>
-    </div>
+    </>
   )
 }

examples/using-router/pages/index.js → examples/using-router/pages/index.tsx

@@ -1,10 +1,10 @@
 import Header from '../components/Header'
 
-export default function Home() {
+export default function IndexPage() {
   return (
-    <div>
+    <>
       <Header />
       <p>HOME PAGE is here!</p>
-    </div>
+    </>
   )
 }

examples/using-router/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "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"]
+}