Moving to NextJS

NextJS Images¹

The problem is that I use remote images that are hosted on Aliyun OSS. So when rendering markdown files, I can not (I find I can later) get depth and height in advance, which is necessary for NextJS Images. So If I want to change img to NextImage, I have to get images metadata before the rendering process. I use image-size to get metadata and plaiceholder to get blur64 of the image (Referring this post)

Visit all nodes (We need to use unist-util-visit) to get img nodes and addProps for them. visit lets us find the image nodes (in markdown, an image will be transferred to p node and img node). The first parameter is tree; the second is the function that filters nodes; the third parameter is the function that does something to nodes.²

Note: Use async, await, Promise.

import { visit } from 'unist-util-visit'
import imageSize from 'image-size'
import { ISizeCalculationResult } from 'image-size/dist/types/interface'

const remarkImgToJsx = () => {
  return async function transformer(tree: Node): Promise<Node> {
    const images: UnistImageNode[] = []

    visit(
      tree,
      (node: UnistNodeType) =>
        node.type === 'paragraph' && node.children.some((n) => n.type === 'image'),
      (node: UnistNodeType) => {
        const imageNode = node.children.find((n) => n.type === 'image') as UnistImageNode
        images.push(imageNode)
        // Change node types from p to div to avoid nesting error
        node.type = 'div'
        node.children = [imageNode]
      }
    )

    for (const image of images) {
      await addProps(image)
    }
  }
}

addProps replaces the original attributes of image nodes with the NextJS Image attributes (blur placeholder is calculated by plaiceholder)

async function addProps(imageNode: UnistImageNode): Promise<void> {
  let res: ISizeCalculationResult
  let blur64: string
  if (imageNode.url.startsWith('http') && !imageNode.url.endsWith('svg')) {
    const imageRes = await fetch(imageNode.url)
    const arrayBuffer = await imageRes.arrayBuffer()
    const buffer = Buffer.from(arrayBuffer)

    res = await imageSize(buffer)
    blur64 = (await getPlaiceholder(buffer)).base64
    ;(imageNode.type = 'mdxJsxFlowElement'),
      (imageNode.name = 'Image'),
      (imageNode.attributes = [
        { type: 'mdxJsxAttribute', name: 'alt', value: imageNode.alt },
        { type: 'mdxJsxAttribute', name: 'src', value: imageNode.url },
        { type: 'mdxJsxAttribute', name: 'width', value: res.width },
        { type: 'mdxJsxAttribute', name: 'height', value: res.height },
        { type: 'mdxJsxAttribute', name: 'quality', value: 100 },
        { type: 'mdxJsxAttribute', name: 'placeholder', value: 'blur' },
        { type: 'mdxJsxAttribute', name: 'blurDataURL', value: blur64 },
      ])
  }
}

Now, every original image has been changed from:

<p><img src="..." /></p>

to NexJS Images, which is on-demand image resizing.

Note: fetching remote images means that the server gets data first and the building time of the site will be much longer.

After doing these, I find that the performance of the site on the cloud is good, but the local dev version takes a long time to refresh, which drives me crazy.

Then I find that my image hoster can offer width and height directly by calling API, which will help me save refreshing and building time.

For example, if I call an image with URL ?x-oss-process=image/info, I can get:

{
  "FileSize": { "value": "4152561" },
  "Format": { "value": "jpg" },
  "FrameCount": { "value": "1" },
  "ImageHeight": { "value": "3712" },
  "ImageWidth": { "value": "5568" },
  "ResolutionUnit": { "value": "2" },
  "XResolution": { "value": "72/1" },
  "YResolution": { "value": "72/1" }
}

The hoster can do some image processing but it can not offer blur64 like what plaiceholder does. So I use this website offered by NextJS docs to get a fixed blur64 and apply it.

const res = await fetch(post.image + '?x-oss-process=image/info')
const json = await res.json()

const height = json.ImageHeight.value
const width = json.ImageWidth.value
post.imageMetadata = {
  height: height,
  width: width,
  blurDataURL: `data:image/png;base64,${siteMetadata.blur64}`,
}

blur64:   'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=',

Domain Blocked

In China, the domain vercel.app is banned. But I found that a guy’s website totally on Vercel can work perfectly. I tested it and find that in most areas of China, the website is accessible. But mine breaks(I set A and CNAME with my domain). Without VPN, I can not even access it. I spent two hours checking why. I even sent an email to the guy to ask if there is something to be managed that I haven’t mentioned. It turned out that my domain zzhgo.com is banned by GFW in China. It is so depressing. So I can only change my domain to atksoto.com.