Next.js & Wordpress

1import '../styles/main.scss'

1// './src/styles/safelist.txt'
2bg-[#1e293b]

1// Before
2export default function Layout({ preview, children }) {}
3
4// After
5type LayoutProps = { preview: boolean; children: React.ReactNode }
6export default function Layout(props: LayoutProps) {
7  const { preview, children } = props
8}

1import { loadEnvConfig } from '@next/env'
2loadEnvConfig(process.cwd())
3
4// then you can use
5const config: CodegenConfig = {
6  schema: process.env.WORDPRESS_API_URL,
7}

1// components/categories.tsx
2import { CategoriesQuery } from '../graphql/gql/graphql'
3
4export default function Categories(props: CategoriesQuery) {
5  const { categories } = props
6	return (
7  	{ categories.edges.map(...) }
8  )
9}

1// From this
2const data = await fetchAPI(`
3	query PreviewPost($id: ID!, $idType: PostIdType!) {
4    post(id: $id, idType: $idType) {
5      databaseId
6      slug
7      status
8    }
9	}`
10)

1// To this
2const data = await fetchAPI(
3  /* GraphQL */ `
4	query PreviewPost($id: ID!, $idType: PostIdType!) {
5    post(id: $id, idType: $idType) {
6      databaseId
7      slug
8      status
9    }
10	}`
11)

1// Modify lib/api.ts
2const client = new ApolloClient({
3  uri: process.env.WORDPRESS_API_URL,
4  cache: new InMemoryCache(),
5})
6
7async function fetchAPI() {
8  export async function getAllPostsForHome() {
9    const { data } = await client.query({
10      query: gql`
11        query AllPosts {
12          posts(first: 20, where: { orderby: { field: DATE, order: DESC } }) {
13            edges {
14              node {
15                title
16                excerpt
17              }
18            }
19          }
20        }
21      `,
22    })
23  	return data?.posts
24  }
25}

1// pages/index.tsx
2import { getAllPostsForHome } from '../lib/api'
3
4export default function Index({ allPosts: { edges } }) {
5  return ()
6}
7
8export const getStaticProps: GetStaticProps = async () => {
9  const allPosts = await getAllPostsForHome()
10  return {
11    props: { allPosts },
12    revalidate: 10,
13  }
14}

1import profilePic from '../public/me.png'
2<Image
3  src={profilePic}
4  alt="Picture of the author"
5/>

1// In the component containing <Image>
2import Image from 'next/image'
3import { useState } from 'react'
4
5export default function ImageForPost({ title, featuredImage, blurDataURL, categories }) {
6  const [isImageReady, setIsImageReady] = useState(false)
7  const onLoadCallBack = () => {
8    setIsImageReady(true)
9  }
10  const image = (
11  	<Image
12      alt={imageAlt}
13      src={externalImgSrc}
14      className={imageClassName}
15      fill={true}
16      sizes={externalImgSizes || '100vw'}
17      onLoadingComplete={onLoadCallBack}
18    />
19  )
20  return (
21  	<>
22      <div className="block h-full w-full md:animate-fadeIn">{image}</div>
23    	{!isImageReady && (
24        <div className="absolute top-0 left-0 h-full w-full">
25          <div className="relative h-full w-full animate-pulse rounded-lg bg-slate-200">
26            <div className="absolute left-[14%] top-[30%] z-20 aspect-square h-[40%] rounded-full bg-slate-300"></div>
27            <div className="absolute bottom-0 left-0 z-10 h-2/5 w-full bg-wave"></div>
28          </div>
29        </div>
30  		)}
31    </>
32}

1import cn from 'classnames'
2import { useRouter } from 'next/router'
3
4export default async function Navigation() {
5  const router = useRouter()
6  const currentRoute = router.pathname
7	return (
8  	{menus?.map((item: MenuItem) => (
9      <Link key={item?.id} href={item?.url as string}>
10        <a
11          className={isActiveClass(
12            item?.url === currentRoute
13          )}
14          aria-current={
15            item?.url === currentRoute ? 'page' : undefined
16          }
17          >
18          {item?.label}
19        </a>
20      </Link>
21    ))}
22  )
23}
24
25const isActiveClass = (isCurrent: boolean) =>
26	cn(
27  	'fixed-clasess',
28    { 'is-current': isCurrent, 'not-current': !isCurrent }
29  )

1import { useRef, useState } from 'react'
2import { useRouter } from 'next/router'
3
4export default function Navigation() {
5	const router = useRouter()
6  const [valueSearch, setValueSearch] = useState('')
7  const searchInput = useRef(null)
8  return (
9  	<form onSubmit={e => {
10      e.preventDefault()
11      router.push(`/search/?s=${encodeURI(valueSearch)}`)
12    }}
13    >
14    	<button type="submit">Search</button>
15      <input
16        type="search"
17        value={valueSearch}
18        ref={searchInput}
19        onChange={e => setValueSearch(e.target.value)}
20      />
21    </form>
22  )
23}

1import React from 'react'
2import Layout from '../components/layout'
3import useSWR from 'swr'
4import Link from 'next/link'
5
6export default function SearchPage() {
7  const isBrowser = () => typeof window !== 'undefined'
8  let query = ''
9  if (isBrowser()) {
10    const { search } = window.location
11    query = new URLSearchParams(search).get('s') as string
12  }
13  const finalSearchTerm = decodeURI(query as string)
14  const { data, error } = useSWR(
15    `
16      {
17        posts(where: { search: "` +
18      finalSearchTerm +
19      `" }) {
20          nodes {
21            id
22            title
23            uri
24          }
25        }
26      }
27    `,
28    fetcher
29  )
30
31  return (
32    <Layout>
33      <div className="pt-20 px-8">
34        <div className="text-3xl">This is the search page!</div>
35        <div className="mt-8">
36          {error && <div className="pt-20">Failed to load</div>}
37          {!data && <div className="pt-20">Loading...</div>}
38          {data && (
39            <ul className="mb-6 list-disc pl-5">
40              {data?.posts?.nodes.map(node => (
41                <li key={node.id}>
42                  <Link href={node.uri}>
43                    <a>{node.title}</a>
44                  </Link>
45                </li>
46              ))}
47            </ul>
48          )}
49        </div>
50      </div>
51    </Layout>
52  )
53}
54
55const fetcher = async query => {
56  const headers: { [key: string]: string } = {
57    'Content-Type': 'application/json',
58  }
59  const res = await fetch('<http://math2it.local/graphql>', {
60    headers,
61    method: 'POST',
62    body: JSON.stringify({
63      query,
64    }),
65  })
66  const json = await res.json()
67  return json.data
68}

1const image = (<Image />)
2// then
3<Link href="">{image}</Link>

1<Link href=""><a>{image}</a></Link>

1// This will fail typecheck
2const headers = { 'Content-Type': 'application/json' }
3headers['Authorization'] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`
4
5// This will pass typecheck
6const headers: { [key: string]: string } = { 'Content-Type': 'application/json' }
7headers['Authorization'] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`
8

1// Instead of
2query PostBySlug($id: ID!, $idType: PostIdType!) {
3  post(id: $id, idType: $idType) {
4
5// You have
6query PostBySlug($id: ID!, $idType: PostIdType!) {
7  post() { // <- here!!!