Examples/cms-wordpress migrate to TypeScript (#39250)

## Documentation / Examples

Not sure that I need to provide type to all of components or not?
Let me know if you want me to provide.
- [x] Closes #38752
- [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/cms-wordpress/components/avatar.js → examples/cms-wordpress/components/avatar.tsx

@@ -1,11 +1,10 @@
 import Image from 'next/image'
 
 export default function Avatar({ author }) {
-  const name = author
-    ? author.node.firstName && author.node.lastName
-      ? `${author.node.firstName} ${author.node.lastName}`
-      : author.node.name
-    : null
+  const isAuthorHaveFullName = author?.node?.firstName && author?.node?.lastName
+  const name = isAuthorHaveFullName
+    ? `${author.node.firstName} ${author.node.lastName}`
+    : author.node.name || null
 
   return (
     <div className="flex items-center">

examples/cms-wordpress/components/hero-post.js → examples/cms-wordpress/components/hero-post.tsx

@@ -1,6 +1,6 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
+import Avatar from './avatar'
+import Date from './date'
+import CoverImage from './cover-image'
 import Link from 'next/link'
 
 export default function HeroPost({

examples/cms-wordpress/components/layout.js → examples/cms-wordpress/components/layout.tsx

@@ -1,6 +1,6 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from './alert'
+import Footer from './footer'
+import Meta from './meta'
 
 export default function Layout({ preview, children }) {
   return (

examples/cms-wordpress/components/more-stories.js → examples/cms-wordpress/components/more-stories.tsx

@@ -1,4 +1,4 @@
-import PostPreview from '../components/post-preview'
+import PostPreview from './post-preview'
 
 export default function MoreStories({ posts }) {
   return (

examples/cms-wordpress/components/post-header.js → examples/cms-wordpress/components/post-header.tsx

@@ -1,8 +1,8 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
-import Categories from '../components/categories'
+import Avatar from './avatar'
+import Date from './date'
+import CoverImage from './cover-image'
+import PostTitle from './post-title'
+import Categories from './categories'
 
 export default function PostHeader({
   title,

examples/cms-wordpress/components/post-preview.js → examples/cms-wordpress/components/post-preview.tsx

@@ -1,5 +1,5 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
+import Avatar from './avatar'
+import Date from './date'
 import CoverImage from './cover-image'
 import Link from 'next/link'
 

examples/cms-wordpress/next.config.js

@@ -8,7 +8,8 @@ if (!process.env.WORDPRESS_API_URL) {
 module.exports = {
   images: {
     domains: [
-      process.env.WORDPRESS_API_URL.match(/(http(?:s)?:\/\/)(.*)/)[2], // Valid WP Image domain.
+      process.env.WORDPRESS_API_URL.match(/(?!(w+)\.)\w*(?:\w+\.)+\w+/)[0], // Valid WP Image domain.
+      '1.gravatar.com',
       '2.gravatar.com',
       'secure.gravatar.com',
     ],

examples/cms-wordpress/package.json

@@ -7,11 +7,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "classnames": "2.3.1",
-    "date-fns": "2.28.0",
+    "@types/node": "^18.6.3",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "classnames": "^2.3.1",
+    "date-fns": "^2.28.0",
     "next": "latest",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4"
   },
   "devDependencies": {
     "autoprefixer": "10.4.7",

examples/cms-wordpress/pages/_app.js → examples/cms-wordpress/pages/_app.tsx

@@ -1,6 +1,7 @@
+import { AppProps } from 'next/app'
 import '../styles/index.css'
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />
 }
 

examples/cms-wordpress/pages/api/exit-preview.js → examples/cms-wordpress/pages/api/exit-preview.ts

@@ -1,4 +1,6 @@
-export default async function exit(_, res) {
+import { NextApiResponse } from 'next'
+
+export default async function exit(_, res: NextApiResponse) {
   // Exit the current user from "Preview Mode". This function accepts no args.
   res.clearPreviewData()
 

examples/cms-wordpress/pages/api/preview.js → examples/cms-wordpress/pages/api/preview.ts

@@ -1,6 +1,10 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
 import { getPreviewPost } from '../../lib/api'
 
-export default async function preview(req, res) {
+export default async function preview(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   const { secret, id, slug } = req.query
 
   // Check the secret and next parameters

examples/cms-wordpress/pages/index.js → examples/cms-wordpress/pages/index.tsx

@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import { GetStaticProps } from 'next'
 import Container from '../components/container'
 import MoreStories from '../components/more-stories'
 import HeroPost from '../components/hero-post'
@@ -34,7 +35,7 @@ export default function Index({ allPosts: { edges }, preview }) {
   )
 }
 
-export async function getStaticProps({ preview = false }) {
+export const getStaticProps: GetStaticProps = async ({ preview = false }) => {
   const allPosts = await getAllPostsForHome(preview)
 
   return {

examples/cms-wordpress/pages/posts/[slug].js → examples/cms-wordpress/pages/posts/[slug].tsx

@@ -1,17 +1,18 @@
 import { useRouter } from 'next/router'
 import ErrorPage from 'next/error'
+import Head from 'next/head'
+import { GetStaticPaths, GetStaticProps } from 'next'
 import Container from '../../components/container'
 import PostBody from '../../components/post-body'
 import MoreStories from '../../components/more-stories'
 import Header from '../../components/header'
 import PostHeader from '../../components/post-header'
 import SectionSeparator from '../../components/section-separator'
 import Layout from '../../components/layout'
-import { getAllPostsWithSlug, getPostAndMorePosts } from '../../lib/api'
 import PostTitle from '../../components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '../../lib/constants'
 import Tags from '../../components/tags'
+import { getAllPostsWithSlug, getPostAndMorePosts } from '../../lib/api'
+import { CMS_NAME } from '../../lib/constants'
 
 export default function Post({ post, posts, preview }) {
   const router = useRouter()
@@ -61,8 +62,12 @@ export default function Post({ post, posts, preview }) {
   )
 }
 
-export async function getStaticProps({ params, preview = false, previewData }) {
-  const data = await getPostAndMorePosts(params.slug, preview, previewData)
+export const getStaticProps: GetStaticProps = async ({
+  params,
+  preview = false,
+  previewData,
+}) => {
+  const data = await getPostAndMorePosts(params?.slug, preview, previewData)
 
   return {
     props: {
@@ -74,7 +79,7 @@ export async function getStaticProps({ params, preview = false, previewData }) {
   }
 }
 
-export async function getStaticPaths() {
+export const getStaticPaths: GetStaticPaths = async () => {
   const allPosts = await getAllPostsWithSlug()
 
   return {

examples/cms-wordpress/tsconfig.json

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