Convert many examples to TypeScript (vercel#41825)

Strategized with @balazsorban44 to open one larger PR, with changes to individual examples as separate commits. 

For each example, I researched how multiple realworld codebases use the featured technology with TypeScript, to thoughtfully convert them by hand - nothing automated whatsoever.

## 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)

Author: maxproske

examples/blog-with-comment/.prettierrc

@@ -1,13 +1,23 @@
 import { useAuth0 } from '@auth0/auth0-react'
 
-function CommentForm({ text, setText, onSubmit }) {
+type CommentFormProps = {
+  text: string
+  setText: Function
+  onSubmit: (e: React.FormEvent) => Promise<void>
+}
+
+export default function CommentForm({
+  text,
+  setText,
+  onSubmit,
+}: CommentFormProps) {
   const { isAuthenticated, logout, loginWithPopup } = useAuth0()
 
   return (
     <form onSubmit={onSubmit}>
       <textarea
         className="flex w-full max-h-40 p-3 rounded resize-y bg-gray-200 text-gray-900 placeholder-gray-500"
-        rows="2"
+        rows={2}
         placeholder={
           isAuthenticated
             ? `What are your thoughts?`
@@ -41,5 +51,3 @@ function CommentForm({ text, setText, onSubmit }) {
     </form>
   )
 }
-
-export default CommentForm

examples/blog-with-comment/components/comment/form.js renamed to examples/blog-with-comment/components/comment/form.tsx

@@ -2,7 +2,7 @@ import CommentForm from './form'
 import CommentList from './list'
 import useComments from '../../hooks/useComment'
 
-function Comment() {
+export default function Comment() {
   const { text, setText, comments, onSubmit, onDelete } = useComments()
 
   return (
@@ -12,5 +12,3 @@ function Comment() {
     </div>
   )
 }
-
-export default Comment

examples/blog-with-comment/components/comment/index.js renamed to examples/blog-with-comment/components/comment/index.tsx

@@ -0,0 +1,57 @@
+import type { Comment } from '../../interfaces'
+import distanceToNow from '../../lib/dateRelative'
+import { useAuth0 } from '@auth0/auth0-react'
+
+type CommentListProps = {
+  comments?: Comment[]
+  onDelete: (comment: Comment) => Promise<void>
+}
+
+export default function CommentList({ comments, onDelete }: CommentListProps) {
+  const { user } = useAuth0()
+
+  return (
+    <div className="space-y-6 mt-10">
+      {comments &&
+        comments.map((comment) => {
+          const isAuthor = user && user.sub === comment.user.sub
+          const isAdmin =
+            user && user.email === process.env.NEXT_PUBLIC_AUTH0_ADMIN_EMAIL
+
+          return (
+            <div key={comment.created_at} className="flex space-x-4">
+              <div className="flex-shrink-0">
+                <img
+                  src={comment.user.picture}
+                  alt={comment.user.name}
+                  width={40}
+                  height={40}
+                  className="rounded-full"
+                />
+              </div>
+
+              <div className="flex-grow">
+                <div className="flex space-x-2">
+                  <b>{comment.user.name}</b>
+                  <time className="text-gray-400">
+                    {distanceToNow(comment.created_at)}
+                  </time>
+                  {(isAdmin || isAuthor) && (
+                    <button
+                      className="text-gray-400 hover:text-red-500"
+                      onClick={() => onDelete(comment)}
+                      aria-label="Close"
+                    >
+                      x
+                    </button>
+                  )}
+                </div>
+
+                <div>{comment.text}</div>
+              </div>
+            </div>
+          )
+        })}
+    </div>
+  )
+}

examples/blog-with-comment/components/comment/list.js

@@ -0,0 +1,7 @@
+type ContainerProps = {
+  children: React.ReactNode
+}
+
+export default function Container({ children }: ContainerProps) {
+  return <div className="container max-w-2xl m-auto px-4">{children}</div>
+}

examples/blog-with-comment/components/comment/list.tsx

@@ -1,21 +1,15 @@
 import Link from 'next/link'
 import Container from '../components/container'
 
-function Header() {
+export default function Header() {
   return (
     <header className="py-6">
       <Container>
         <nav className="flex space-x-4">
-          <Link href="/">
-            <a>About</a>
-          </Link>
-          <Link href="/posts">
-            <a>Posts</a>
-          </Link>
+          <Link href="/">About</Link>
+          <Link href="/posts">Posts</Link>
         </nav>
       </Container>
     </header>
   )
 }
-
-export default Header

examples/blog-with-comment/components/container.js

@@ -0,0 +1,8 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test'
+    readonly NEXT_PUBLIC_AUTH0_DOMAIN: string
+    readonly NEXT_PUBLIC_AUTH0_CLIENT_ID: string
+    readonly NEXT_PUBLIC_BASE_URL: string
+  }
+}

examples/blog-with-comment/components/container.tsx

@@ -1,28 +1,32 @@
-import { useState, useEffect } from 'react'
+import type { Comment } from '../interfaces'
+import React, { useState, useEffect } from 'react'
 import useSWR from 'swr'
 import { useAuth0 } from '@auth0/auth0-react'
 
+async function fetcher(url: string) {
+  const query = new URLSearchParams({ url })
+  const queryUrl = `${url}?${query.toString()}`
+
+  return fetch(queryUrl).then((res) => res.json())
+}
+
 export default function useComments() {
   const { getAccessTokenSilently } = useAuth0()
   const [text, setText] = useState('')
-  const [url, setUrl] = useState(null)
+  const [url, setUrl] = useState<string | null>(null)
 
-  const { data: comments, mutate } = useSWR(
-    () => {
-      const query = new URLSearchParams({ url })
-      return `/api/comment?${query.toString()}`
-    },
-    {
-      initialData: [],
-    }
+  const { data: comments, mutate } = useSWR<Comment[]>(
+    '/api/comment',
+    fetcher,
+    { fallbackData: [] }
   )
 
   useEffect(() => {
     const url = window.location.origin + window.location.pathname
     setUrl(url)
   }, [])
 
-  const onSubmit = async (e) => {
+  const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     const token = await getAccessTokenSilently()
 
@@ -42,7 +46,7 @@ export default function useComments() {
     }
   }
 
-  const onDelete = async (comment) => {
+  const onDelete = async (comment: Comment) => {
     const token = await getAccessTokenSilently()
 
     try {

examples/blog-with-comment/components/header.js renamed to examples/blog-with-comment/components/header.tsx

@@ -0,0 +1,24 @@
+export type User = {
+  name: string
+  picture: string
+  sub: string
+  email?: string
+}
+
+export type Comment = {
+  id: string
+  created_at: number
+  url: string
+  text: string
+  user: User
+}
+
+export type Post = {
+  slug?: string
+  title?: string
+  author?: string
+  date?: Date
+  content?: string
+  excerpt?: string
+  [key: string]: any
+}

examples/blog-with-comment/environment.d.ts

@@ -1,23 +1,34 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import type { Comment } from '../interfaces'
 import redis from './redis'
 import { nanoid } from 'nanoid'
 import getUser from './getUser'
 
-export default async function createComments(req, res) {
+export default async function createComments(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   const { url, text } = req.body
   const { authorization } = req.headers
 
   if (!url || !text || !authorization) {
     return res.status(400).json({ message: 'Missing parameter.' })
   }
 
+  if (!redis) {
+    return res
+      .status(400)
+      .json({ message: 'Failed to connect to redis client.' })
+  }
+
   try {
     // verify user token
     const user = await getUser(authorization)
     if (!user) return res.status(400).json({ message: 'Need authorization.' })
 
     const { name, picture, sub, email } = user
 
-    const comment = {
+    const comment: Comment = {
       id: nanoid(),
       created_at: Date.now(),
       url,

examples/blog-with-comment/hooks/useComment.js renamed to examples/blog-with-comment/hooks/useComment.ts

@@ -1,6 +1,6 @@
 import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict'
 
-export default function distanceToNow(dateTime) {
+export default function distanceToNow(dateTime: number | Date) {
   return formatDistanceToNowStrict(dateTime, {
     addSuffix: true,
   })

examples/blog-with-comment/interfaces/index.ts

@@ -1,17 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import type { User, Comment } from '../interfaces'
 import redis from './redis'
 import getUser from './getUser'
 
-export default async function deleteComments(req, res) {
-  const { url, comment } = req.body
+export default async function deleteComments(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { url, comment }: { url: string; comment: Comment } = req.body
   const { authorization } = req.headers
 
   if (!url || !comment || !authorization) {
     return res.status(400).json({ message: 'Missing parameter.' })
   }
 
+  if (!redis) {
+    return res.status(500).json({ message: 'Failed to connect to redis.' })
+  }
+
   try {
     // verify user token
-    const user = await getUser(authorization)
+    const user: User = await getUser(authorization)
     if (!user) return res.status(400).json({ message: 'Invalid token.' })
     comment.user.email = user.email
 
@@ -25,7 +34,7 @@ export default async function deleteComments(req, res) {
     // delete
     await redis.lrem(url, 0, JSON.stringify(comment))
 
-    return res.status(200).json()
+    return res.status(200).end()
   } catch (err) {
     return res.status(400)
   }