DEV Community: Kevin Wu

From 80 to 8000/m: A Journey of SEO Optimization (Part 1)

Kevin Wu — Fri, 06 Dec 2024 07:10:00 +0000

Introduction

Hi, this is a greeting from Kevin. I used to work as a front-end engineer at startup, and now I've left to become an independent developer.

Here are some SEO tips from my recent work on a X farmer Twitter thread download app called TwitterShots that I'd like to share with you. I am still a beginner on SEO. If you have better ideas, feel free to let me know in the comments.

I will briefly introduce the success story of increasing website total impressions from 80 to 8K/month in 30 days without any promotion. This is the first article, Currently, I am focusing on improving DR and backlinks.

The Beginning

TwitterShots is a screenshot tool I tinkered with in October 2023. Its main function is to quickly capture tweets and share them elsewhere.

I quickly put together a homepage and a feature page over the weekend and launched it. After launching, I immediately submitted it to the tech enthusiast weekly newsletter by tech blogger ruanyf, and it was recommended. That day, it brought in about 300+ user visits, and I gained 6 followers on Twitter because of it.I was surprised and also very happy.

So launch early and expose your product and domain. This might not bring a lot of visitors to your homepage, as it's unlikely to go viral, but it will help search engines index your domain as soon as possible.

If you want to know why I developed this tiny X screenshot tool, you can check out the initial log Changelog v.0.1.0.

Using SEO Tools

I used GSC and SEO AI analysis tools to determine traffic sources. The newsletter traffic was short-lived, and for a long time afterward, due to a lack of promotion and maintenance, the traffic was almost in single digits. In October, I started trying some optimizations. Be sure to connect to Google Search Console; it's useful and free. Through it, you can see the source of search keywords. For example, I found that the main ones were twitter shot, twitter screenshot, X screenshot:

Export the analysis data to find the main keywords, devices, and regions. GSC data is clearly listed. I first optimized keywords with large impressions but small clicks (those with higher rankings can wait), using twitter thread screenshot as an example. Analyzing this was quite challenging, so I also tried developing an AI SEO tool that analyzes and provides suggestions after importing CSV data.

Update Meta, H2, Image, and any other areas you can use

Meta information is very important for search rankings. When you see search results, search engines show the match between keywords and meta information.

Titles are used by Google SEO to organize and explain content. Each title acts as a roadmap, so don't skip levels, like H1 -> H2, instead of H1 -> H3.

Make use of the Alt Title for images as well.

Regarding checking meta information, you can download and use this free plugin SEO-Toolbar from Ahrefs. It helps you check what you might be missing. For example, I discovered through it that my OG image settings were incorrect and that I forgot the sitemap.xml.

After installing it and checking my website, I found several issues:

The robots sitemap file was not configured
The social OG image parameters were set incorrectly
The meta description was too long, among other things

Optimize and Ensure Compatibility for Specific Devices and Regional Users

Identify where your users are accessing your product.

If many are using mobile devices, quickly ensure compatibility and a good user experience on mobile. For example, I noticed many users from the Arab region were visiting but leaving quickly. After analyzing, I realized they have a right-to-left reading habit, so I fixed it with a new version.

Make good use of Google's People also search for.

I found that when searching for SEO tools, most people look for Free SEO tools. So, I added an "it's free" badge on the homepage, and when users search for Free xxx, it has already risen to second place.

When you're unsure how to build your keywords and long-tail terms, Google's People also search for is a great reference.

Improve your website's DR and increase backlinks

DR, also known as Domain Rating, generally means the higher your domain's "authority," the better.

Getting backlinks from other quality websites is the only way to improve your website's domain rating (authority) score.

Make good use of the free SEO tool for testing DR provided by the Ahrefs website-authority-checker. I will write a second article later on how to improve DR and increase the number of backlinks, so feel free to follow me and stay tuned.

I recently took the time to read some of the articles they published at Ahrefs SEO. If you're a beginner like me, I highly recommend you check them out; they offer a lot of insights.

Submit your sitemap and create as many related pages as possible

To let Google Search know your site's crawling rules and paths, you need to create a robots.txt and sitemap.xml, and include as many pages as possible. For this, I am adding changelog and blog pages.

Stay patient keep building

All of these optimizations won't show immediate results, so the most important thing is to stay patient and keep building, trusting that SEO improvements will pay off.

I am currently working as an independent developer.I am a full-stack developer skilled in creating AI applications and building landing pages. If you have needs in this area, feel free to contact me. I am happy to help.

If you find this helpful for your SEO optimization, feel free to follow and connect with me. Stay tuned.

X @0xinhua
dev to: 0xinhua

Add AI chat dialog to your VitePress documentation site

Kevin Wu — Wed, 20 Sep 2023 08:17:19 +0000

This article will guide you how to quickly empower your VitePress documentation site with AI conversational capabilities using an open-source tool Documate. This will allow it to answer your users' questions based on the content of your documentation, supporting streaming outputs.

The complete source code of the project can be viewed at https://github.com/AirCodeLabs/documate.

Integration Steps

If you want to create a brand-new VitePress project with AI conversational capabilities, use the command below:

npm create documate@latest --template vitepress

After creation, jump directly to step 3 "Build, Upload, and Configure the Search Backend API".

To add AI conversational capabilities to an existing VitePress project, follow these steps:

1. Initialization

Run the following command in your VitePress project root directory to initialize:

npx @documate/documate init --framework vue

This command will create a documate.json configuration file.

{
  "root": ".",
  "include": [
    "**/*.md"
  ],
  "backend": ""
}

A documate:upload command will also be added, which is used to upload documents to create a knowledge base. I will explain its specific usage later.

{
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview",
    "documate:upload": "documate upload"
  },
  "dependencies": {
    "@documate/vue": "^0.2.3"
  },
  "devDependencies": {
    "@documate/documate": "^0.1.0"
  }
}

2. Add UI Entry to the Project

Add the following code to the file .vitepress/theme/index.js. If it doesn't exist, you need to create it manually. VitePress introduces how to customize your own theme in the Extending the Default Theme documentation.

import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'

// Load component and style
import Documate from '@documate/vue'
import '@documate/vue/dist/style.css'

export default {
  ...DefaultTheme,
  // Add Documate UI to the slot
  Layout: h(DefaultTheme.Layout, null, {
    'nav-bar-content-before': () => h(Documate, {
      endpoint: '',
    }),
  }),
}

The above code will add an AI chat box UI to the navbar. After launching the service locally using npm run docs:dev, you can find the Ask AI button in the top left corner. If you don't see the Ask AI button, check to ensure all the above code has been added correctly and that you've imported the CSS style file from @documate/vue/dist/style.css.

Now, you have successfully integrated the UI. Next, we'll add the interface capability for the chat box to answer questions.

3. Build, Upload, and Configure the Search Backend API

Documate's backend code is used to upload document content to create a knowledge base and to receive user questions and return streaming answers.

Go to the backend folder on GitHub and click on 「Deploy to AirCode」 to quickly copy and deploy your own backend code.

If you are using AirCode (an online platform for writing and deploying Node.js applications) for the first time, you will be redirected to the login page. It is recommended to log in with GitHub for faster access.

After creating the app, set the OPENAI_API_KEY environment variable in the Environments tab to your OpenAI Key value. You can obtain the API Key from the OpenAI platform.

Click the「Deploy」button on the top bar to deploy all functions online. Once deployed successfully, you will receive URLs to call each function.

Here we will use the upload.js and ask.js functions, one for uploading document content and the other for answering questions.

4. Set Up the API Endpoint

In the AirCode Dashboard, select the deployed upload.js file, copy its URL, and add it to the backend field in documate.json.

// documate.json
{
  "root": ".",
  "include": [ "**/*.md" ],
  "backend": "替换为你的 upload.js 的 URL"
}

Similarly, in AirCode, select the deployed ask.js file, copy its URL, and modify the endpoint value in .vitepress/theme/index.js.

// .vitepress/theme/index.js
import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import Documate from '@documate/vue'
import '@documate/vue/dist/style.css'

export default {
  ...DefaultTheme,
  Layout: h(DefaultTheme.Layout, null, {
    'nav-bar-content-before': () => h(Documate, {
        // Replace the URL with your own one
        endpoint: '替换为你的 ask.js 的 URL',
      },
    ),
  }),
}

5. Run the Project

Use the command below to upload the content to the backend and generate the documentation knowledge base:

npm run documate:upload

Once the command completes, launch the project locally, click the Ask AI button in the top left corner, enter a question in the pop-up dialog box, and receive answers based on your documentation content.

npm run docs:dev

For more usage and configuration methods, please refer to the Documate project on GitHub, Comments and discussions are welcome.

GitHub -> https://github.com/AirCodeLabs/documate.

Building a Blog Subscription and Pusher with AirCode and Resend

Kevin Wu — Mon, 28 Aug 2023 14:57:11 +0000

Introduction

Learn how to build subscription and push notification services in Node.js and Next.js, and send your first email using the Resend Node.js SDK on AirCode.

Here's what the finished page and email will look like:

In this tutorial, I'll guide you through how I used AirCode and Resend to add basic subscription and email delivery features to the AirCode blog.

You'll learn:

How to create a subscription form with Tailwind and Next.js
How to build API in AirCode
How to make nice email templates with react-email
How to send email update notifications using Resend SDK

You can also directly check out the full source code on GitHub so you can get started fast!

Front-end interface blog-subscription-form
Back-end API and email pushing blog-subscription-and-email-pushing

Just a quick background about AirCode:

A Serverless Node.js stack for API development.
No credit card needed,try it out —> https://aircode.io

No downloads, no config,no setup.Code Node.js functions instantly from browser with built-in database and file storage.

Prerequisites

To get the most out of this guide, you’ll need two accounts，no worries, both of these are available in free plan:

AirCode Serverless Node.js stack for API development
Resend Email service for developers, prepare a API key and verify your domain

Crafting the user interface

Before diving into the tutorial, let's briefly review the subscribe and push system. What are the functional requirements?

An input field and button to submit a user's email
An API endpoint to save data and communicate with the front-end
An updatable email template for inserting dynamic post content
An email delivery system for notifications

First, we'll create the user subscription interface for email input on our blog pages, I will use Next.js and Tailwind css for the interface.

Let'set it up.

Using create-next-app to create a subscribe-form folder for the web application as done below:

npx create-next-app@latest

On installation, you'll see the following prompts:

npx create-next-app@latest
✔ What is your project named? … subscribe-form
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes

After Initialized git and Installing dependencies, Congratulations! 🎉 You can now start the app by using the command below.

npm run dev

find the page.tsx in src/app/page.tsx, copy the code snippet below to replace the default page content:

"use client"

import { useState } from 'react'

export default function Home() {

  const onSubscribe = async (_e) => {}

  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')

  const onChange = (email: string): void => {
    setEmail(email)
    if (message) {
      setMessage('')
    }
  }
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24 bg-black">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
      <div className="py-16 sm:py-24 lg:py-32">
      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 lg:grid-cols-12 lg:gap-8 lg:px-8">
        <div className="max-w-2xl text-3xl font-bold tracking-tight text-neutral-100 sm:text-4xl lg:col-span-7">
          <p className="inline sm:block lg:inline xl:block">Want product news and updates?</p>{' '}
          <p className="inline sm:block lg:inline xl:block">Sign up for our newsletter.</p>
        </div>
        <form className="w-full max-w-md lg:col-span-5 lg:pt-2" onSubmit={onSubscribe}>
          <div className="flex gap-x-4">
            <label htmlFor="email-address" className="sr-only">
              Email address
            </label>
            <input
              id="email-address"
              name="email"
              type="email"
              autoComplete="email"
              required
              className="min-w-0 flex-auto rounded-md border-0 bg-neutral-100/5 px-3.5 py-2 text-neutral-100 shadow-sm ring-1 ring-inset ring-neutral-100/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => onChange(e.target.value)} 
            />
            <button
              type="submit"
              className="flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-neutral-100 shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
            >
              Subscribe
            </button>
          </div>
          <div className='mt-2.5 leading-6'>
            { <span className='text-[13px] block text-[#8a8f98] font-medium'>{ message }</span> }
          </div>
          <p className="mt-4 text-sm leading-6 text-neutral-300">
            We care about your data. Read our{' '}
            <a href="https://docs.aircode.io/legal/privacy-policy" className="font-semibold text-neutral-100">
              Privacy&nbsp;Policy
            </a>
            .
          </p>
        </form>
      </div>
      </div>
      </div>
    </main>
  )
}

Save the code, then you will see a elegant subscribe form like this:

Communicating with Node.js API in AirCode

Create a AirCode App

In this section, you'll learn how to communicate with your Node.js server by creating an API in AirCode.

Before we start coding, log in to aircode.io/login and create a new app. Input an app name and select the TypeScript option:

After enter the dashboard page,

Change the default hello.ts file name with subscribe.ts.
Click the Deploy button depoly your first API in second.

Copy the invoke url in to the browser, now you have got your first interactive RESTful API.

https://byq3nrmbgm.us.aircode.run/subscribe

Submit email

Back to the front-end, when submitting the subscription form, we'll send the form data to the server. Let's add some code.

In a Next.js client component, if you need to fetch data, you can call a Route Handler. Next.js extends the native fetch Web API, allowing you to configure caching and revalidation behavior for each fetch request on the server. Alternatively, you can use a third-party library for requesting. In this case, I'm using SWR as recommended in the documentation.

Use following shell to install swr:

npm install swr

Copy the following code in this file:

import { useRef, useState } from 'react'
import useSWRMutation from 'swr/mutation'

  const emailRef = useRef<HTMLInputElement>()
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')

  const onChange = (email: string): void => {
    setEmail(email)
    if (message) {
      setMessage('')
    }
  }

  async function sendRequest(url: string, { arg }: { arg: { email: string }}) {
    return fetch(url, {
      method: 'POST',
      body: JSON.stringify(arg)
    }).then(res => res.json())
  }

  // replace with your invoke url you got in the previous step
  const { trigger, isMutating } = useSWRMutation('https://byq3nrmbgm.us.aircode.run/subscribe', sendRequest, /* options */)

  const subscribe = async (e) => {
    e.preventDefault();
    if(!email && emailRef.current) {
      emailRef.current.focus()
      setMessage('Please fill out email field.')
      return
    }
    try {
      const result = await trigger({ email }, /* options */)
      console.log('subscribe result: ', result)

      const { message, code } = result
      if (message) {
        setMessage(result?.message)
      }

      if (code === 0) {
        setEmail('')
      }

    } catch (e) {
      let message = 'An error has occurred. '
      if (e?.message) {
        message += `error message: ${e.message}. `;
      }
      message += 'please try again later.'
      setMessage(message)
    }
  };

You will find a TS error in the module importing:

Cannot find module 'swr/mutation'. Did you mean to set the 'moduleResolution' option to 'node',
or to add aliases to the 'paths' option?ts(2792)

This error occurs when TypeScript cannot find the swr/mutation module during compilation. There are a couple things you can try to resolve it, set moduleResolution to node in your tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

From the code snippet above, when user input their email and click the submit button, we use swr/mutation trigger HTTP fetching.You need replace with your invoke url you got in the previous step in this line:

// replace with your invoke url got in the previous step after your deploy
const { trigger, isMutating } = useSWRMutation('https://byq3nrmbgm.us.aircode.run/subscribe', sendRequest, /* options */)

You can try to input a email then send it to your api server, if you see the following response Hi, AirCode., congratulations, your first subscribe api is ready.

Integrating next.js with Serverless function

And now, we can let AirCode save our data! Let's enrich our subscribe function!

When we receive a request, We can currently add a simple validations:

First which must be non-null
And the passed email parameter must be the correct email format
Third, if the current mailbox has been subscribed, response corect message

We need to validate the email parameter to check if it's a properly formatted email address before storing it in the database.


// @see https://docs.aircode.io/guide/functions/
import aircode from 'aircode';

const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

export default async function (params: any, context: any) {
  console.log('Received params:', params, typeof params);

  const { email } = params;

  console.log('email', email);

  if (!email) {
    return {
      code: 1,
      message: 'Email required.',
    };
  }

  if (!regex.test(email)) {
    return {
      code: 1,
      message: 'Invalid email.',
    };
  }

}

From the code snippet above accepts a post request from the next.js subscribe App with user's email, After the simple validation, we need use the database to store the data.

In AirCode you dont need setup a MySQL or other NoSQL database, you just need new a table and saving your data.

try {
  // Get the emails table
  const EmailsTable = aircode.db.table('emails');

  // Find email by address
  const matchedRecord = await EmailsTable.where({ email }).findOne();

  if (matchedRecord) {
    return {
      code: 0,
      message: 'Your email is already in our subscription list.',
    };
  }

  // Insert a new email
  const newEmail = {
    email,
  };

  await EmailsTable.save(newEmail);

  return {
    code: 0,
    message: 'You have been successfully subscribed to our newsletter.',
  };
} catch (err) {
  return {
    code: 1,
    message: `An error occurred while subscribing, please try again later, the error message: ${err}`,
  };
}

From the code snippet above:

Create a emails table saving data with aircode.db.table(tableName)
Find one matching records through where({ field: value }).findOne(), check whether the user is already subscribed
Insert one records at once via Table.save(record), save is an async function, so it needs to use await to ensure that the execution ends.

Create a beautiful email template for blog updates

When comes to building an Email template, It's just not an enjoyable experience, typically, you can only send emails using HTML or plain text, and:

You can't see the results in real time befor you send it for testing
There may be compatibility issues in the display of various email systems

Thanks @react-email a open source helping built email with React components and Tailwind CSS.

Let's quickly rendering a email template in AirCode:

Create a email Component

Add a email.jsx for our email template, replace with the following content:


const {
  Body,
  Container,
  Column,
  Hr,
  Html,
  Img,
  Link,
  Button,
  Row,
  Section,
  Text,
} = require("@react-email/components");

const React = require("react");

const dt = new Date();
const year = dt.getFullYear();

const getEmail = ({ post }) => {

  const { title, excerpt, coverImage, href } = post;

  return (
    <Html>
      <Body style={main}>
        <Container style={container}>
          <Section>
            <Column style={viewBrowserColumn}>
              <Link href="https://aircode.io/blog" style={viewBrowserLink}>
                View in browser
              </Link>
              <Text style={splitLine}>|</Text>
              <Link href="https://docs.aircode.io/" style={viewBrowserLink}>
                About AirCode
              </Link>
            </Column>
            <Column style={sectionHeader}>
              <Img
                style={sectionLogo}
                src="https://aircode.io/aircode-icon.svg"
                width="50px"
                height="31"
                alt="logo"
              />
              <h2>AirCode Blog Update</h2>
            </Column>
          </Section>

          <Section style={paragraphContent}>
            <Hr style={hr} />
            <Text style={heading}>Hi there,</Text>
            <Text style={paragraph}>
              Here are the latest updates form our blog:
              <Link style={postTitle} href={href}>
                {title}
              </Link>
            </Text>
          </Section>

          <Section style={paragraphContent}>
            <Column>
              <Text style={paragraph}>{excerpt}</Text>
            </Column>
          </Section>

          <Section style={paragraphContent}>
            <Column style={postImage}>
              <Img src={coverImage} alt="What we are building" width="400px" />
            </Column>
          </Section>

          <Section style={paragraphContent}>
            <Column style={btnContainer}>
              <Button
                pX={12}
                pY={12}
                style={button}
                href={href}
              >
                Read the post
              </Button>
            </Column>
          </Section>

          <Section style={containerContact}>
            <Text style={mediaParagraph}>Star and Follow us</Text>
            <Row style={{ marginBottom: "20px" }}>
              <Column>
                <Link
                  href="https://github.com/aircodelabs/aircode"
                  style={mediaLink}
                >
                  <Img
                    width="28"
                    height="28"
                    src="https://aircode.io/github-icon.svg"
                  />
                </Link>
              </Column>
              <Column>
                <Link href="https://twitter.com/aircode_io">
                  <Img
                    width="28"
                    height="28"
                    src="https://aircode.io/twitter-icon.svg"
                  />
                </Link>
              </Column>
            </Row>
          </Section>

          <Section style={{ ...paragraphContent, paddingBottom: 30 }}>
            <Text
              style={{
                ...paragraph,
                fontSize: "12px",
                textAlign: "center",
                margin: 0,
              }}
            >
              {`©${year}  AirCode, Inc. All rights reserved.`}
            </Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
};

module.exports = getEmail;

const main = {
  padding: "10px 2px",
  backgroundColor: "#f5f5f5",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
};

const sectionHeader = {
  paddingTop: "20px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
};

const viewBrowserColumn = {
  color: "#666",
  padding: "20px 0",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
};

const splitLine = {
  lineHeight: "10px",
  margin: "0 4px",
};

const viewBrowserLink = {
  fontSize: "11px",
  lineHeight: "10px",
  textUnderlinePosition: "from-font",
  textDecoration: "underline",
  color: "#666",
  textDecorationColor: "#666",
};

const sectionLogo = {
  padding: "0 10px",
};

const container = {
  margin: "30px auto",
  width: "610px",
  backgroundColor: "#fff",
  borderRadius: 5,
  overflow: "hidden",
};

const containerContact = {
  width: "100%",
  borderRadius: "5px",
  overflow: "hidden",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  textAlign: "center",
};

const mediaLink = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  textAlign: "center",
};

const postTitle = {
  marginLeft: "10px",
  fontSize: "16px",
  lineHeight: "26px",
  fontWeight: "700",
  color: "#6B7AFF",
};

const postImage = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
};

const mediaParagraph = {
  fontSize: "12px",
  lineHeight: "20px",
  color: "#3c4043",
};

const heading = {
  fontSize: "14px",
  lineHeight: "26px",
};

const btnContainer = {
  padding: "10px 20px",
  display: "flex",
  justifyContent: "center",
};

const button = {
  backgroundColor: "#6B7AFF",
  borderRadius: "3px",
  color: "#fff",
  textDecoration: "none",
  textAlign: "center",
  display: "block",
  marginTop: "26px",
};

const paragraphContent = {
  padding: "0 40px",
};

const paragraph = {
  fontSize: "14px",
  lineHeight: "22px",
  color: "#3c4043",
};

const hr = {
  borderColor: "#e8eaed",
  margin: "20px 0",
};

Render the component to html string

Add a render.ts function to convert components to string text content, the code:

// https://react.email/docs/utilities/render
require('@babel/register')({
  presets: ['@babel/preset-react'],
});

import aircode from 'aircode';

const getEmail  = require('./email.jsx');

import { render } from '@react-email/render';

// test data for email template
const post = {
  href: "https://aircode.io/blog/why-create-aircode",
  title: "What we are building",
  excerpt: `AirCode is Your Serverless Node.js Stack for API Development,
  zero-config, all in one place.AirCode is Your Serverless Node.js
  Stack for API Development, zero-config, all in one place`,
  coverImage:
    "https://ph-files.imgix.net/b41dc780-1623-4c46-90b9-1a0d514c5730.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&fit=max&dpr=2",
};

export default async function (params: any, context: any) {

  const html = render(getEmail({ post }));

  context.set('content-type', 'text/html');

  return html;
};

We need those dependencies:

@react-email/components and react for build commponent
@babel/register and @babel/preset-react @react-email/render for transform and render,

Let's install it in Dependencies panel, after all dependencies installed, click the debug button to test your code. If there are no other errors, you will see your email template html in the console and response panels.

You can also just host the template online by click the Deploy button，copy the invoke url to browser, now you can check and review what your email looks like when you open it in your mailbox.

Using Resend SDK delivering the email

Now we have the data and email template, the last thing is to send the updates notification to the subscriber throught email.

Prerequisites

Let's learn how to send your first email using the Resend Node.js SDK. First we need add a deliver.ts function as a email poster:

Before coding, To get the most out of this guide, you’ll need to:

We need the Resend Node.js SDK. search resend lib and install this sdk in Dependencies panel like before. the example code from docs is very easy to use.

import { Resend } from 'resend';
// use your own key
const resend = new Resend('re_123456789');

try {
  const data = await resend.emails.send({
    from: 'Acme <onboarding@resend.dev>',
    to: ['delivered@resend.dev'],
    subject: 'Hello World',
    // use your email template
    html: '<strong>It works!</strong>',
  });

  console.log(data);
} catch (error) {
  console.error(error);
}

Send email using HTML template

Send an email is by using the html parameter with template you have done before, the to from database you have collected. See the full deliver source code.

require('@babel/register')({
  presets: ['@babel/preset-react'],
});

type RecordItem = {
  email: string,
};

import aircode from 'aircode';

const getEmail = require('./email.jsx');
const { render } = require('@react-email/render');

const { Resend } = require('resend');

const resend = new Resend(process.env.RESEND_API_KEY);

module.exports = async function (params: any, context: any) {
  console.log('Received params:', params);

  const { title, excerpt, coverImage, href } = params;

  const html = render(getEmail(title, excerpt, coverImage, href));

  const emailTables = aircode.db.table('emails');

  const emailsRecords = await emailTables
    .where()
    .projection({ email: 1 })
    .find();

  console.log('emailsRecords', emailsRecords);

  if (emailsRecords && emailsRecords.length) {
    const emailList = emailsRecords.map((item) => item.email);

    console.log('emails', emailList);

    // In Resend docs, Sending to a batch of recipients is not yet supported, but you can send to each recipient individually
    // see https://resend.com/docs/knowledge-base/can-i-send-newsletters-with-resend
    try {
      const data = await resend.emails.send({
        from: 'hello@aircode.io',
        to: emailList,
        subject: 'AirCode updates',
        html,
      });

      console.log(data);
      return {
        data,
        code: 0,
        message: 'success',
      };
    } catch (error) {
      console.error(error);
      return {
        data: null,
        code: 1,
        message: error,
      };
    }
  }
  return {
    data: null,
    message: 'There is no mailing list to deliver, please add email.',
  };
};

You need paste this key RESEND_API_KEY form Resend into the AirCode environment settings before you test it, just like the below:

Add your post data in params for debugging email diliver, click the Debug button to send first test email.

The test data you can paste to Params panel:

{
  "href": "https://aircode.io/blog/why-create-aircode",
  "title": "What we are building?",
  "excerpt": "AirCode is Your Serverless Node.js Stack for API Development,zero-config, all in one place.AirCode is Your Serverless Node.js Stack for API Development, zero-config, all in one place",
  "coverImage": "https://ph-files.imgix.net/b41dc780-1623-4c46-90b9-1a0d514c5730.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&fit=max&dpr=2"
}

Congratulations on getting things work! 🎉

Conclusion

So far, you've learnt how to create a beautiful email with React, communicate between a Next.js and Node.js app, and send email notifications using Resend SDK.

The source code for this tutorial is available here:

Thank you for reading! Kevin is here, this is also my first post on Dev.to, thank you the community. If you have any questions, feel free to comment below. I can’t wait to see what you will build!

AirCode
Twitter