[Docs] Update with-loading example (#39646)

Changelog

Updated dependencies
Migrated to Typescript
Use CSS from npm module

Documentation / Examples

 Make sure the linting passes by running pnpm lint
 The examples guidelines are followed from our contributing doc

examples/with-loading/package.json

@@ -8,7 +8,13 @@
   "dependencies": {
     "next": "latest",
     "nprogress": "^0.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.5",
+    "@types/nprogress": "0.2.0",
+    "@types/react": "18.0.17",
+    "typescript": "4.7.4"
   }
 }

examples/with-loading/pages/_app.js → examples/with-loading/pages/_app.tsx

@@ -1,17 +1,19 @@
+import type { AppProps } from 'next/app'
 import { useEffect } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import NProgress from 'nprogress'
-import '../public/nprogress.css'
+import 'nprogress/nprogress.css'
 
-export default function App({ Component, pageProps }) {
+export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter()
 
   useEffect(() => {
-    const handleStart = (url) => {
+    const handleStart = (url: string) => {
       console.log(`Loading: ${url}`)
       NProgress.start()
     }
+
     const handleStop = () => {
       NProgress.done()
     }

examples/with-loading/pages/about.js → examples/with-loading/pages/about.tsx

@@ -1,10 +1,10 @@
-const AboutPage = () => <p>This is about Next.js!</p>
-
 export async function getServerSideProps() {
   await new Promise((resolve) => {
     setTimeout(resolve, 500)
   })
   return { props: {} }
 }
 
-export default AboutPage
+export default function AboutPage() {
+  return <p>This is about Next.js!</p>
+}

examples/with-loading/pages/forever.js → examples/with-loading/pages/forever.tsx

@@ -1,10 +1,10 @@
-const ForeverPage = () => <p>This page was rendered for a while!</p>
-
 export async function getServerSideProps() {
   await new Promise((resolve) => {
     setTimeout(resolve, 3000)
   })
   return { props: {} }
 }
 
-export default ForeverPage
+export default function ForeverPage() {
+  return <p>This page was rendered for a while!</p>
+}

examples/with-loading/pages/index.tsx

@@ -0,0 +1,3 @@
+export default function IndexPage() {
+  return <p>Hello Next.js!</p>
+}

examples/with-loading/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"]
+}