docs(examples): Modernise Next.js examples (#7706)

* docs(examples): Update react/auto-refetching

* Update infinite-query-with-max-pages, load-more-infinite-scroll

* Upgrade react/nextjs

* More projects

* Update playground

* Update prefetching

* Cleanup deps

* Disable typescript during next build

* Fix eslint plugin

* Final changes

docs/config.json

@@ -903,7 +903,7 @@
             },
             {
               "label": "Basic",
-              "to": "framework/solid/examples/basic-typescript"
+              "to": "framework/solid/examples/basic"
             },
             {
               "label": "Basic w/ GraphQL-Request",

examples/angular/infinite-query-with-max-pages/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@tanstack/query-example-angular-infinite-query-with-max-pages",
-  "version": "0.0.0",
+  "private": true,
+  "type": "module",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development"
   },
-  "private": true,
   "dependencies": {
     "@angular/common": "^17.3.10",
     "@angular/compiler": "^17.3.10",

examples/react/auto-refetching/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/react/auto-refetching/next.config.js

@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig

examples/react/auto-refetching/package.json

@@ -10,9 +10,13 @@
   "dependencies": {
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
-    "isomorphic-unfetch": "4.0.2",
     "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }

examples/react/auto-refetching/src/pages/api/data.js → examples/react/auto-refetching/src/pages/api/data.ts

@@ -1,7 +1,12 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
 // an simple endpoint for getting current list
 let list = ['Item 1', 'Item 2', 'Item 3']
 
-export default async (req, res) => {
+export default async (
+  req: NextApiRequest,
+  res: NextApiResponse<typeof list>,
+) => {
   if (req.query.add) {
     if (!list.includes(req.query.add)) {
       list.push(req.query.add)

examples/react/auto-refetching/src/pages/index.js → examples/react/auto-refetching/src/pages/index.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
 
-//
-
 import {
-  useQuery,
-  useQueryClient,
-  useMutation,
   QueryClient,
   QueryClientProvider,
+  useMutation,
+  useQuery,
+  useQueryClient,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
@@ -28,7 +26,7 @@ function Example() {
 
   const { status, data, error, isFetching } = useQuery({
     queryKey: ['todos'],
-    queryFn: async () => {
+    queryFn: async (): Promise<Array<string>> => {
       const response = await fetch('/api/data')
       return await response.json()
     },
@@ -37,7 +35,7 @@ function Example() {
   })
 
   const addMutation = useMutation({
-    mutationFn: (add) => fetch(`/api/data?add=${add}`),
+    mutationFn: (add: string) => fetch(`/api/data?add=${add}`),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
   })
 
@@ -51,7 +49,7 @@ function Example() {
 
   return (
     <div>
-      <h1>Auto Refetch with stale-time set to 1s)</h1>
+      <h1>Auto Refetch with stale-time set to {intervalMs}ms</h1>
       <p>
         This example is best experienced on your own machine, where you can open
         multiple tabs to the same localhost server and see your changes

examples/react/auto-refetching/tsconfig.json

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

examples/react/infinite-query-with-max-pages/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/react/infinite-query-with-max-pages/next.config.js

@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig

examples/react/infinite-query-with-max-pages/package.json

@@ -10,10 +10,13 @@
   "dependencies": {
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
-    "isomorphic-unfetch": "4.0.2",
     "next": "^14.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-intersection-observer": "^8.34.0"
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }

examples/react/infinite-query-with-max-pages/src/pages/api/projects.js → examples/react/infinite-query-with-max-pages/src/pages/api/projects.ts

@@ -1,5 +1,6 @@
-// an endpoint for getting projects data
-export default (req, res) => {
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
   const cursor = parseInt(req.query.cursor) || 0
   const pageSize = 4
 

examples/react/infinite-query-with-max-pages/src/pages/index.js → examples/react/infinite-query-with-max-pages/src/pages/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {
-  useInfiniteQuery,
   QueryClient,
   QueryClientProvider,
+  useInfiniteQuery,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 

examples/react/infinite-query-with-max-pages/tsconfig.json

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

examples/react/load-more-infinite-scroll/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/react/load-more-infinite-scroll/next.config.js

@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig

examples/react/load-more-infinite-scroll/package.json

@@ -10,10 +10,14 @@
   "dependencies": {
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
-    "isomorphic-unfetch": "4.0.2",
     "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^8.34.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }

examples/react/load-more-infinite-scroll/src/pages/api/projects.js → examples/react/load-more-infinite-scroll/src/pages/api/projects.ts

@@ -1,5 +1,6 @@
-// an endpoint for getting projects data
-export default (req, res) => {
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
   const cursor = parseInt(req.query.cursor) || 0
   const pageSize = 5
 

examples/react/load-more-infinite-scroll/src/pages/index.js → examples/react/load-more-infinite-scroll/src/pages/index.tsx

@@ -34,13 +34,19 @@ function Example() {
     hasPreviousPage,
   } = useInfiniteQuery({
     queryKey: ['projects'],
-    queryFn: async ({ pageParam }) => {
+    queryFn: async ({
+      pageParam,
+    }): Promise<{
+      data: Array<{ name: string; id: number }>
+      previousId: number
+      nextId: number
+    }> => {
       const response = await fetch(`/api/projects?cursor=${pageParam}`)
       return await response.json()
     },
     initialPageParam: 0,
-    getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
-    getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
+    getPreviousPageParam: (firstPage) => firstPage.previousId,
+    getNextPageParam: (lastPage) => lastPage.nextId,
   })
 
   React.useEffect(() => {

examples/react/load-more-infinite-scroll/tsconfig.json

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

examples/react/nextjs-app-prefetching/next.config.js

@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig

examples/react/nextjs-app-prefetching/package.json

@@ -12,11 +12,10 @@
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
     "next": "^15.0.0-rc.0",
-    "react": "^19.0.0-rc-4c2e457c7c-20240522",
-    "react-dom": "^19.0.0-rc-4c2e457c7c-20240522"
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
-    "@types/node": "^20.12.12",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
     "typescript": "5.3.3"

examples/react/nextjs-suspense-streaming/next.config.js

@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
   webpack: (config) => {
     if (config.name === 'server') config.optimization.concatenateModules = false
 

examples/react/nextjs-suspense-streaming/package.json

@@ -14,11 +14,9 @@
     "@tanstack/react-query-next-experimental": "^5.50.1",
     "next": "^14.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "superjson": "^2.2.1"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.12.12",
     "@types/react": "^18.2.79",
     "typescript": "5.3.3"
   }

examples/react/nextjs/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/react/nextjs/next.config.js

@@ -5,6 +5,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 }
 
 export default nextConfig

examples/react/nextjs/package.json

@@ -12,8 +12,11 @@
     "@tanstack/react-query-devtools": "^5.50.1",
     "next": "^14.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "resolve-from": "^5.0.0",
-    "web-streams-polyfill": "^4.0.0"
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "5.3.3"
   }
 }

examples/react/nextjs/src/components/InfoBox/index.js → examples/react/nextjs/src/components/InfoBox.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const InfoBox = ({ children }) => (
+const InfoBox = ({ children }: { children: React.ReactNode }) => (
   <div className="info">
     <style jsx>{`
       .info {

examples/react/nextjs/src/components/Layout/index.js → examples/react/nextjs/src/components/Layout.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const Layout = ({ children }) => {
+export const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <main>
       {children}