DEV Community: Dave Gray

Bye Copilot - How to Create a Local AI Coding Assistant for Free

Dave Gray — Mon, 24 Jun 2024 00:00:00 +0000

TLDR: Create your own local AI Coding Assistant that integrates with VS Code.

AI Coding Assistants

I didn't jump onboard the AI Coding Assistant train at first.

However, I now open up a chat with ChatGPT as often as I do MDN.

I've found it's often a quicker reference for exactly what I need.

I have considered paying the monthly fee for GitHub Copilot, but what if you could use open source large language models (LLMs) to create your own AI Coding Assistant?

Now you can.

Install Ollama

Start by going to Ollama.com and downloading the version for your operating system.

Note: As I write this, the Windows version is still considered a "preview". After installing on Windows, I had to restart my computer for ollama to be available at the command line.

Open a terminal window and type ollama --help to confirm you have Ollama installed and your computer can find it.

Pick an Open Source LLM

Visit the EvalPlus Leaderboard where the performance of many models are compared.

There are currently a couple of options in the EvalPlus Top 5 to consider: DeepSeek-Coder-v2 and CodeQwen1.5.

Before choosing, go back to Ollama.com and search the models to look at their details.

I personally decided to go with codeqwen. It is a 4.2GB download and deepseek-coder-v2 is 8.9GB.

You can try out several LLMs if you want to.

After choosing at least one, copy the ollama command and run it in your terminal window to download your LLM of choice.

For example, the command on the codeqwen page is ollama run codeqwen.

Add the Continue VS Code Extension

Open up VS Code and click the extensions menu icon.

Search for continue.

You should find Continue by continue.dev.

Install the extension and you should find it by icon or name in the activity bar afterwards.

Click it to open and you should see a splash screen.

The screen will confirm Ollama is installed and provide other recommendations that you can ignore.

Click the "Local" button and the "next / continue" button.

You should now have a chat screen that opened over your filetree (if your filetree is on the left side).

Configuring Continue

At the bottom of the chat window, select Ollama - codeqwen:latest from the menu.

Click the settings icon to open up the config.json file.

Look for the tabAutocompleteModel setting.

Change both the title and model values to codeqwen.

You will also see a custom commands setting like this:

"customCommands": [
    {
      "name": "test",
      "prompt": "{{{ input }}}\n\nWrite a comprehensive set of unit tests for the selected code. It should setup, run tests that check for correctness including important edge cases, and teardown. Ensure that the tests are complete and sophisticated. Give the tests just as chat output, don't edit any file.",
      "description": "Write unit tests for highlighted code"
    }
  ],

You can add your own custom commands here. In this example, if you highlight a function in your code and type test in the chat window, it will execute the prompt you see.

Here's an example of a custom command I added:

"customCommands": [
    {
      "name": "test",
      "prompt": "{{{ input }}}\n\nWrite a comprehensive set of unit tests for the selected code. It should setup, run tests that check for correctness including important edge cases, and teardown. Ensure that the tests are complete and sophisticated. Give the tests just as chat output, don't edit any file.",
      "description": "Write unit tests for highlighted code"
    },
    {
      "name": "step",
      "prompt": "{{{ input }}}\n\nExplain the selected code step by step.",
      "description": "Code explanation"
    }
  ],

Getting Started:

Click the help icon at the bottom right of the chat window.

It provides a link to a tutorial, web resources and keyboard shortcuts.

A couple of quick things to try:

Select some existing code in your file, then press Ctrl+L to start a chat on the selected code.
Select some existing code in your file, then type test in the chat window, and press enter to generate unit tests for that code.
Create a new empty code file, press Ctrl+i and type instructions for code generation. Then watch your AI Code Assistant generate the code.
Start typing code in a file and look for the autocompletion suggestions. Press tab to use them.

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Patreon: Join my Support Team!

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

Next.js Server Actions with next-safe-action

Dave Gray — Tue, 18 Jun 2024 00:00:00 +0000

TLDR: Add type safe and validated server actions to your Next.js App Router project with next-safe-action.

Next.js Server Actions

Server Actions are asynchronous functions executed on the server in Next.js.

They are defined with the "use server" directive and can be used
in both server and client components for handling form submissions and data mutations.

Over the last year, I've seen them applied in a variety of ways, and I've used them in projects myself, too.

Now, I have recently discovered the next-safe-action library, and I like the structure, ease-of-use, and extra features it provides.

An Example Server Action without next-safe-action

I think the best way to show why I like next-safe-action is to show how I implemented a Next.js server action without the library first.

Afterwards, I will show the refactor with next-safe-action.

Here's an example server action from a repository and tutorial I recently published on creating a Next.js Modal Form with react-hook-form, ShadCN/ui, Server Actions and Zod validation.

// src/app/actions/actions.ts
"use server"

import { UserSchema } from "@/schemas/User"
import type { User } from "@/schemas/User"

type ReturnType = {
    message: string,
    errors?: Record<string, unknown>
}

export async function saveUser(user: User): Promise<ReturnType> {

    // Check valid login here

    const parsed = UserSchema.safeParse(user)

    if (!parsed.success) {
        return {
            message: "Submission Failed",
            errors: parsed.error.flatten().fieldErrors
        }
    }

    await fetch(`http://localhost:3500/users/${user.id}`, {
        method: 'PATCH',
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            firstname: user.firstname,
            lastname: user.lastname,
            email: user.email,
        })
    })

    return { message: "User Updated! 🎉" }
}

You can see above that I was using a local json-server instance in the tutorial to update user data.

Before the update occurs, the data is validated with Zod.

If the validation fails, Zod validation errors are sent back to the client component with the ZodError type flatten method applied.

Now let's compare to the refactored version using next-safe-action.

An Example Server Action with next-safe-action

// src/app/actions/actions.ts
"use server"

import { UserSchema } from "@/schemas/User"
import { actionClient } from "@/lib/safe-action"
import { flattenValidationErrors } from "next-safe-action"

export const saveUserAction = actionClient
    .schema(UserSchema, {
        handleValidationErrorsShape: (ve) => flattenValidationErrors(ve).fieldErrors,
    })
    .action(async ({ parsedInput: { id, firstname, lastname, email } }) => {

        // Check valid login here

        await fetch(`http://localhost:3500/users/${id}`, {
            method: 'PATCH',
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                firstname: firstname,
                lastname: lastname,
                email: email,
            })
        })

        return { message: "User Updated! 🎉" }
    })

The file has shrunk down from 33 lines to 26 lines of code.

Starting at the top you can see I still import the Zod UserSchema I have defined. The inferred User type is no longer imported.

New imports include actionClient and flattenValidationErrors.

Instead of export async function, I'm using export const and starting the definition of saveUserAction with the actionClient.

I chain the schema method to the actionClient while passing in the UserSchema. I also set the handleValidationErrorsShape option to use the imported flattenValidationErrors method. This method is similar to the ZodError type method flatten that I used in the original function.

Next, I chain the action method and call the async function inside of it. It supplies a parsedInput prop. I destructure the prop to get the input data sent to the server action.

The remainder of the function remains unchanged.

Note that in this refactored version I did not define a ReturnType.

The return type is the result defined by the useAction hook return object. I apply the useAction hook in the client component.

While some overhead is saved in the server action code you see above, even more is saved in the client component.

Below, I again show before and after code versions. This time the before and afters are of the client component using react-hook-form.

An Example Client Component without next-safe-action

// src/app/edit/[id]/UserForm.tsx
"use client"

import { useForm } from "react-hook-form"
import { Form } from "@/components/ui/form"
import { Button } from "@/components/ui/button"
import { InputWithLabel } from "@/components/InputWithLabel"
import { zodResolver } from "@hookform/resolvers/zod"
import { UserSchema } from "@/schemas/User"
import type { User } from "@/schemas/User"
import { saveUser } from "@/app/actions/actions"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"

type Props = {
    user: User
}

export default function UserForm({ user }: Props) {
    const [message, setMessage] = useState('')
    const [errors, setErrors] = useState({})
    const router = useRouter()

    const form = useForm<User>({
        mode: 'onBlur',
        resolver: zodResolver(UserSchema),
        defaultValues: { ...user },
    })

    useEffect(() => {
        // boolean to indicate if form has not been saved
        localStorage.setItem("userFormModified", form.formState.isDirty.toString())
    }, [form.formState.isDirty])

    async function onSubmit() {
        setMessage('')
        setErrors({})
        /* No need to validate here because 
        react-hook-form already validates with 
        the Zod schema */
        const result = await saveUser(form.getValues())
        if (result?.errors) {
            setMessage(result.message)
            setErrors(result.errors)
            return
        } else {
            setMessage(result.message)
            // update client-side cache
            router.refresh() 
            // reset dirty fields
            form.reset(form.getValues())
        }
    }

    return (
        <div>
            {message ? (
                <h2 className="text-2xl">{message}</h2>
            ) : null}

            {errors ? (
                <div className="mb-10 text-red-500">
                    {Object.keys(errors).map(key => (
                        <p key={key}>{`${key}: ${errors[key as keyof typeof errors]}`}</p>
                    ))}
                </div>
            ) : null}

            <Form {...form}>
                <form onSubmit={(e) => {
                    e.preventDefault()
                    form.handleSubmit(onSubmit)();
                }} className="flex flex-col gap-4">

                    <InputWithLabel
                        fieldTitle="First Name"
                        nameInSchema="firstname"
                    />
                    <InputWithLabel
                        fieldTitle="Last Name"
                        nameInSchema="lastname"
                    />
                    <InputWithLabel
                        fieldTitle="Email"
                        nameInSchema="email"
                    />
                    <div className="flex gap-4">
                        <Button>Submit</Button>
                        <Button
                            type="button"
                            variant="destructive"
                            onClick={() => form.reset()}
                        >Reset</Button>
                    </div>
                </form>
            </Form>
        </div>
    )
}

In the above example, I had to set state for both the message and errors that the original server action could return.

I also needed to consider that state in the onSubmit function.

In the refactored version below, you can see how this is simplified.

An Example Client Component with next-safe-action

// src/app/edit/[id]/UserForm.tsx
"use client"

import { useForm } from "react-hook-form"
import { Form } from "@/components/ui/form"
import { Button } from "@/components/ui/button"
import { InputWithLabel } from "@/components/InputWithLabel"
import { zodResolver } from "@hookform/resolvers/zod"
import { UserSchema } from "@/schemas/User"
import type { User } from "@/schemas/User"
import { saveUserAction } from "@/app/actions/actions"
import { useEffect } from "react"
import { useRouter } from "next/navigation"

import { useAction } from "next-safe-action/hooks"
import { DisplayServerActionResponse } from "@/components/DisplayServerActionResponse"

type Props = {
    user: User
}

export default function UserForm({ user }: Props) {
    const router = useRouter()
    const { execute, result, isExecuting } = useAction(saveUserAction)

    const form = useForm<User>({
        resolver: zodResolver(UserSchema),
        defaultValues: { ...user },
    })

    useEffect(() => {
        // boolean to indicate if form has not been saved
        localStorage.setItem("userFormModified", form.formState.isDirty.toString())
    }, [form.formState.isDirty])

    async function onSubmit() {
        /* No need to validate here because 
        react-hook-form already validates with 
        the Zod schema */
        execute(form.getValues())
        // update client-side cache
        router.refresh()
        // reset dirty fields
        form.reset(form.getValues())
    }

    return (
        <div>
            <DisplayServerActionResponse result={result} />

            <Form {...form}>
                <form onSubmit={(e) => {
                    e.preventDefault()
                    form.handleSubmit(onSubmit)();
                }} className="flex flex-col gap-4">

                    <InputWithLabel
                        fieldTitle="First Name"
                        nameInSchema="firstname"
                    />
                    <InputWithLabel
                        fieldTitle="Last Name"
                        nameInSchema="lastname"
                    />
                    <InputWithLabel
                        fieldTitle="Email"
                        nameInSchema="email"
                    />
                    <div className="flex gap-4">
                        <Button>{isExecuting ? "Working..." : "Submit"}</Button>
                        <Button
                            type="button"
                            variant="destructive"
                            onClick={() => form.reset()}
                        >Reset</Button>
                    </div>
                </form>
            </Form>
        </div>
    )
}

In this refactored version, I imported the useAction hook supplied by next-safe-action and a custom component I created called DisplayServerActionResponse.

I eliminated all usage of useState.

DisplayServerActionResponse receives the result that is provided by the useAction hook. It holds the data sent back from the server action.

useAction also provides an execute function and an isExecuting boolean. (Check the docs for what else it can provide, too.)

All of this greatly reduces the logic I needed to put in the onSubmit function.

Receiving the result from the server action makes it easy to abstract the displayed response to the custom DisplayServerActionResponse component, too.

Here's a quick look at that component as well..

Displaying the Server Action Result

type Props = {
    result: {
        data?: {
            message?: string,
        },
        serverError?: string,
        fetchError?: string,
        validationErrors?: Record<string, string[] | undefined> | undefined,
    }
}

export function DisplayServerActionResponse({ result }: Props) {

    const { data, serverError, fetchError, validationErrors } = result

    return (
        <>
            {/* Success Message */}
            {data?.message ? (
                <h2 className="text-2xl my-2">{data.message}</h2>
            ) : null}

            {serverError ? (
                <div className="my-2 text-red-500">
                    <p>{serverError}</p>
                </div>
            ) : null}

            {fetchError ? (
                <div className="my-2 text-red-500">
                    <p>{fetchError}</p>
                </div>
            ) : null}

            {validationErrors ? (
                <div className="my-2 text-red-500">
                    {Object.keys(validationErrors).map(key => (
                        <p key={key}>{`${key}: ${validationErrors && validationErrors[key as keyof typeof validationErrors]}`}</p>
                    ))}
                </div>
            ) : null}
        </>
    )
}

Above, you can see that next-safe-action provides not only validation errors from the Zod schema I constructed, but it also provides server errors and fetch errors.

In addition, the result object contains the success message I provided from the server action.

Learn More

This is just one example and a simple one at that! Dive into the docs and solve your own specific use case to see what else next-safe-action is capable of.

I plan to refactor my old server actions and use next-safe-action going forward.

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Patreon: Join my Support Team!

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

How to Create Excel Spreadsheets with Styling Options Using JavaScript

Dave Gray — Mon, 17 Jun 2024 00:00:00 +0000

TLDR: An Open Source fork of SheetJS lets you create and style Excel spreadsheets with JavaScript.

Creating XLSX Files

An XLSX file is a Microsoft Excel spreadsheet.

I previously documented How to Download xlsx Files from a Next.js Route Handler.

In that blog post, I used the xlsx package which is also known as SheetJS.

However, I discovered a limitation of the community edition of the xlsx package: It did not allow the row and cell styling that my stakeholders desired in their final product.

The PRO edition does allow styling, but I looked for an open source solution and found it.

xlsx-js-style

xlsx-js-style is a fork of SheetJS combined with code from a couple of other open source projects that were adding styles to SheetJS.

The only drawback I see is the last version was published 2 years ago, but it does not have the vulnerability I warned about if you install the xlsx dependency directly from npm.

xlsx-js-style allows you to create Excel spreadsheets with JavaScript and style the cells with borders, colors, alignment, and font styles.

Add xlsx-js-style to Your Project

Install xlsx:

npm i xlsx-js-style

Next, import xlsx-js-style into your project:

import XLSX from "xlsx-js-style"

You can use this package in any JavaScript or TypeScript project.

Creating and Styling the XLSX Worksheet

Here's an example of how to use the xlsx-js-style package:

// define your headers 
const headers = [
    "FirstName",
    "LastName",
    "Email",
]

// set column widths
const colWidths = [
        { wch: 30 },
        { wch: 30 },
        { wch: 50 },
]

// get the data 
const userData = await getUserData()

// early return if no data
if (!userData || !userData[0]) {
    return null
}

// set header row height 
// consider if you have vertical headers
const headerRowHeight = [
    { hpt: 80 },
]

// Dynamically set row height based on size of data
const dataRowHeight = Array.from({ length: userData[0].length }, () => ({ hpt: 30 }))

// Combine header row height and data row height
const rowHeight = [...headerRowHeight, ...dataRowHeight]

// Create a new worksheet: 
const worksheet = XLSX.utils.json_to_sheet([])

// Assign widths to columns
worksheet['!cols'] = colWidths

// Assign height to rows
worksheet['!rows'] = rowHeight

// Enable auto-filter for columns
worksheet['!autofilter'] = { ref: "A1:C1" }

// Add the headers to the worksheet: 
XLSX.utils.sheet_add_aoa(worksheet, [headers])

// add data to sheet 
XLSX.utils.sheet_add_json(worksheet, userData, {
    skipHeader: true,
    origin: -1
})

// get size of sheet 
const range = XLSX.utils.decode_range(worksheet["!ref"] ?? "")
const rowCount = range.e.r
const columnCount = range.e.c

// Add formatting by looping through data in sheet 
for (let row = 0; row <= rowCount; row++) {
    for (let col = 0; col <= columnCount; col++) {
        const cellRef = XLSX.utils.encode_cell({ r: row, c: col })

        // Add this format to every cell
        worksheet[cellRef].s = {
            alignment: {
                horizontal: "left",
                wrapText: true,
            },
        }

        // vertical header - 1st column only
        if (row === 0 && col === 0) {
            worksheet[cellRef].s = {
                //spreads in previous cell settings
                ...worksheet[cellRef].s,
                alignment: {
                    horizontal: "center",
                    vertical: "center",
                    wrapText: false,
                    textRotation: 180,
                },
            }
        }

        // Format headers bold
        if (row === 0) {
            worksheet[cellRef].s = {
                //spreads in previous cell settings
                ...worksheet[cellRef].s, 
                font: { bold: true },
            }
        }

    }
}

return worksheet

// After this, add worksheet to workbook, download, etc. 
// See docs and my previous article

Other Styles Available

I only applied a few of the styles available in the above example.

Checkout all of the available style settings on the npm page for xlsx-js-style.

Learning More:

Read my previous article on How to Download xlsx Files if you want to create these files in a Node.js backend and request them from your frontend. My example is with Next.js, but you could just set it up in Node.js without Next.js.
If you read the previous article or watch the video below, remember to replace the xlsx dependency with the xlsx-js-style dependency I discussed in this article.

Enjoy creating Excel spreadsheets with JavaScript!

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Patreon: Join my Support Team!

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

FIX: Git Bash is Slow and has Strange Random Characters in VS Code

Dave Gray — Fri, 14 Jun 2024 00:00:00 +0000

TLDR: If you're using git bash in VS Code and notice it slows down and/or starts printing random characters, here's how to fix it.

The Problem

After a recent VS Code update, I noticed git bash really slowed down.

Sometimes it even output random weird characters like the ones you see in my terminal window below.

How to Fix It (for now)

Press Ctrl+, or click the cog icon in the bottom left of VS Code to open Settings.

Use the search bar and search for terminal integrated shell.

The setting for Terminal > Integrated > Shell Integration > Enabled should show up.

Uncheck the box for this setting.

If you don't find that setting, you can open the JSON settings file and add this line:
"terminal.integrated.shellIntegration.enabled": false,

Check Back

This seems to be a bug after a recent VS Code update. I don't think this setting provides anything I will miss, but if you do, you may want to check back and re-enable this in the future.

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Patreon: Join my Support Team!

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

How to Download xlsx Files from a Next.js Route Handler

Dave Gray — Sun, 18 Feb 2024 00:00:00 +0000

TLDR: You can set up a Next.js Route Handler that creates and downloads Microsoft Excel (xlsx) files.

XLSX Files

No matter where you work as a developer, there's a good chance someone will ask you to send them an MS Excel spreadsheet sooner or later. Those files end with the extension xlsx or xls.

At my job, I manage a large data project and regularly receive requests for table exports as spreadsheets.

I decided to set up an API endpoint via Next.js route handler which will allow my boss and co-workers to create and download their own table exports on demand.

xlsx dependency

The xlsx package is also known as SheetJS.

Install xlsx:

npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

Note: Do NOT get the xlsx package from the npm registry with npm install xlsx. Sheetjs has stopped using the public registry at version 18.5. You will see the version in the public registry is 2+ years old and has a high severity vulnerability now. You can confirm this vulnerability on the Socket.dev xlsx page.

Add xlsx to Your Project

Next, import xlsx into your project:

import * as XLSX from 'xlsx'

My Next.js route handler starts by receiving a parameter with the requested table name. I'm also including some pseudo-code comments to allow you to follow the logic process until I get to the xlsx details.

/* example path: /api/tables/[table] */

export async function GET(
    request: NextRequest,
    { params }: { params: { table: string } }
) {
    // check for authorized user first! 
    try {
        const { table } = params
        if (!table) throw new Error('Table name required')

        // check table name with list of table names here

        // if table doesn't exist, throw an error 

        // Query: SELECT * FROM table and get a JSON response 

    } catch (e) {
        if (e instanceof Error) {
            return new Response(e.message, {
                status: 400,
            })
        }
    }


}

Creating the XLSX File

Here's the good stuff using the xlsx package:

// ...previous code 

// Query: SELECT * FROM your table and get a JSON response

// Create a new XLSX workbook:
const workbook = XLSX.utils.book_new()

// Create a new worksheet: 
const worksheet = XLSX.utils.json_to_sheet(jsonTableData)

// Append the worksheet to the workbook: 
XLSX.utils.book_append_sheet(workbook, worksheet, "MySheet")

// Create data buffer 
const buffer = XLSX.write(workbook, { type: "buffer", bookType: "xlsx" })

// Create and send a new Response
return new Response(buffer, {
    status: 200,
    headers: {
        'Content-Disposition': `attachment; filename="${table}.xlsx"`,
        'Content-Type': 'application/vnd.ms-excel',
    }
})

// } catch (e) { and rest of code...

You can find a similar example for a Node.js & Express server in the SheetJS docs.

The key to success here is creating the buffer with the XLSX.write method, and then sending it in the Response with the proper headers.

Other File Types

Do you want to download CSV (comma-separated) or TSV (tab-separated) files?

Or maybe just display an HTML version?

No problem!

You can find all of the appropriate XLSX methods in the SheetJS docs, but here is how I provide CSV downloads, too.

I'm looking for a format parameter. If it equals csv, then I'm sending that file type instead.

/* example path: /api/tables/[table]?format=csv */

// begin route handler code above 

// put this somewhere before the XLSX creation and response 
const searchParams = request.nextUrl.searchParams
const format = searchParams.get('format')

if (format === 'csv') {

    const csv = XLSX.utils.sheet_to_csv(worksheet, {
        forceQuotes: true,
    })

    return new Response(csv, {
        status: 200,
        headers: {
            'Content-Disposition': `attachment; filename="${tableName}.csv"`,
            'Content-Type': 'text/csv',
        }
    })
}

Final Notes:

Always check for an authorized user.
Don't allow SQL injections. I'm verifying the table parameter with a list of accurate table names. Only those specific values are allowed.

Enjoy creating downloads!

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Patreon: Join my Support Team!

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

How to get an Accurate Column Item Count in React Table

Dave Gray — Fri, 26 Jan 2024 00:00:00 +0000

TLDR: If you have null field data, you'll need to take an extra step to get an accurate column count in React Table.

React Table

I've been working with React Table v8, and it is very good!

It has allowed me to quickly create a very useful table for a large amount of data.

The only problem with this data: It has a lot of null values saved over approximately 15 years.

I implemented column filters like you see in this React Table example, but I noticed the item count shown in the placeholder text was off.

The code in the docs example giving the column item count for the filter input placeholder:

<DebouncedInput
    // other attributes here
    placeholder={`Search... (${column.getFacetedUniqueValues().size})`}
/>

getFacetedUniqueValues returns a Map.

The number of items in a Map is retrieved from its size property.

The Column Item Count Fix

The above works great if your data has no null values OR you want to include those null values in your count.

In my implementation, I did not want to count those values.

To avoid including them in the item count, I switched from the above placeholder to what you see here:

<DebouncedInput
    // other attributes here
    placeholder={`Search... (${[...column.getFacetedUniqueValues()].filter(arr => arr[0]).length})`}
/>

Spreading the Map returned from column.getFacetedUniqueValues() into a new array provides me with an array of arrays.

I filter that array to eliminate any null, empty or false values and finally, get the length value of the array.

You would want to handle this differently if you were filtering boolean or numerical data.

In this example, I'm filtering a text field and only looking for a truthy return in the filter method.

Now I have an accurate column item count that does not include any null or empty values.

Filtering by Null Values

In the end, my stakeholders wanted to be able to filter by the null values in their data.

To do this, you need to replace the null data in the React Table with something else.

You can do this in the accessor function as you create your columns.

Here is the part to add in your accessor function:

if (row[key] == null) return '✖'

This allows the table filter to use the ✖ value.

Note: the ✖ will show in the table instead of an empty cell, too.

This is what my stakeholders wanted. Your mileage may vary.

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Patreon: Join my Support Team!

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

How to Write a SQL Subquery with Drizzle ORM

Dave Gray — Sun, 14 Jan 2024 00:00:00 +0000

I need to write a SQL select query that joins a couple of tables.

No problem.

However, I also need to join that query with the results of another query.

This is possible in SQL with a subquery.

I am using Drizzle ORM to write type-safe queries instead of just raw SQL statements.

I create the main query BEFORE adding in the subquery:

import { db } from "@/index"
import { plant, genus } from "@/schema"
import { eq, or, like } from "drizzle-orm"

const plantData = await db.select({
        ID: plant.plantVarietyInfoId,
        Genus: genus.description,
}).from(plant)
        .leftJoin(genus, eq(plant.genusId, genus.id))
        .where(or(
            like(plant.plantVarietyInfoId, `%${searchTerm}%`),
            like(genus.description, `%${searchTerm}%`),
        ))
        .orderBy(genus.description)

Next, I need to add in a max ship week value from a Shipping Records table. This table has a many-to-many relationship with the Plant table.

To begin, I create the ship week subquery above the main query in the file:

import { db } from "@/index"
import { plant, genus } from "@/schema"
import { eq, or, like, max } from "drizzle-orm"

const shipWeekQuery = db.select({
        ShipWeek: max(shippingRecord.expectedShipWeek).as('shipWeek'),
        ID: shippingRecord.plantVarietyInfoId,
    }).from(shippingRecord)
        .groupBy(shippingRecord.plantVarietyInfoId)
        .as('shipWeekRecords')

I need to use as() for aliases in the above subquery twice. Once on the max ship week value, and once on the overall subquery. Without these, the subquery will not work.

When adding the subquery ShipWeek value to the main query, I need to refer to the shipWeekQuery.

Finally, I can add the subquery to the main query with a left join:

const plantData = await db.select({
        ID: plant.plantVarietyInfoId,
        Genus: genus.description,
        ShipWeek: shipWeekQuery.ShipWeek,
}).from(plant)
        .leftJoin(genus, eq(plant.genusId, genus.id))
        .leftJoin(shipWeekQuery, eq(plant.plantVarietyInfoId, shipWeekQuery.ID))
        .where(or(
            like(plant.plantVarietyInfoId, `%${searchTerm}%`),
            like(genus.description, `%${searchTerm}%`),
        ))
        .orderBy(genus.description)

You can read more about creating a select from subquery in the Drizzle ORM docs.

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Patreon: Join my Support Team!

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

How to Auto-Format Unwanted Python Line Indentations in VS Code

Dave Gray — Fri, 05 Jan 2024 00:00:00 +0000

VS Code can remove unwanted line indentations in a Python file.. or can it?

TLDR: VS Code no longer supports the desired formatting behavior, but if you want, you can still install a version that supports it.

Update: You can install autopep8 in your virtual environment and run autopep8 -i -a -a your-file-name.py to get the desired formatting. Unfortunately, it won't apply in VS Code settings. You must run this in a terminal window. Thanks to Michael J. Sheets for the email!

The Beginning

I published a 9 Hour Python Course for Beginners in 2023.

In the second chapter of the course, I show how VS Code can auto-format your Python code when you save your file.

I did it again to create the screen recording below:

You can see that I tab twice and then choose "Format Document With" from the context menu. I then choose "Python" and the file auto-formats.

Then I tab twice again and save the file with Ctrl+S. The file once again formats because I have Format On Save selected in my settings.

The Problem

Shortly after publishing my course, VS Code changed how it handles auto-formatting.

This has led to some confusion and frustration.

I get it.

I am also frustrated when things change right after I publish a video.

In tech things change all the time - and that includes web development and programming tools.

My best advice for beginners is to get used to change. Change will keep happening throughout your career in tech.

That said, you can tackle a problem like this and find a solution.

I did, and I'm going to share it below.

First, let's address some fixes that won't work and a discussion that is not exactly accurate.

Fixes That Won't Work

After receiving many video comments about the Python formatting example I provided, I opened a Python file in VS Code and tried it again.

It didn't work.

It clearly used to work as I demonstrated in the video, but something had indeed changed.

At this point, I knew it was likely due to a VS Code update.

I searched the web for an answer. I found all sorts of random advice given with the best of intentions.

Some shared their VS Code settings.json preferences for Python because theirs worked.

Some blamed using a virtual environment.

Others claimed autopep8 was deprecated, and everyone should use black instead. (As of January 2024, autopep8 is available for use and is not deprecated.)

I believe anyone sharing the above solutions were just a VS Code update away from theirs not working as well.

A Not Exactly Accurate Discussion

I read the autopep8 logs of my current VS Code installation. There I noticed a warning stating Skipping non python code.

I Googled this phrase along with VS Code and found a GitHub discussion with a VS Code maintainer.

I know he was trying to help, but he suggested what I demonstrated in the video above was NOT possible with VS Code as I had it setup:

That's probably not being done by a formatter we support since that isn't valid Python code (you can't have an indent like that as it's not valid Python code). They may have some other extension installed, pressed something else to fix the indentation (e.g. ctrl+shift+tab to dedent the line), etc.

Regardless, there is zero expectation from us that any formatter we support would be able to handle fixing that code.

Again, I know he meant well, and I respect the VS Code (and all) maintainers. Nothing personal here, friend. Your work is vital.

Unfortunately, all of the assumptions above were incorrect.

I did not use another formatter.
I did not have another extension installed.
I did not press a key combination to dedent the line

I'm sure the maintainer would have directly addressed the issue if he was provided with steps to recreate the conditions for himself.

That's exactly what I'm going to do.

How to Remove Unwanted Line Indentations with VS Code Auto-Formatting

I had updated VS Code on my main workstation. The auto-formatting I demonstrated in the video was no longer working on it.

Fortunately, my old Windows laptop had not been updated.

I checked my installed versions of VS Code and the Python extension for VS Code:

VS Code v1.70.2

Python Extension v2022.16.1

I created a new Python file in VS Code and quickly recreated the auto-formatting scenario.

It worked!

This told me my hunch was correct. The desired formatting behavior had been removed in a VS Code update.

I wanted to confirm I could recreate this desired formatting behavior on another computer, too.

I got out my new Macbook. It has the latest version of Python installed. (3.12.1 as of this writing)

I downloaded VS Code v1.70.2 and installed it.

That's not enough though. I needed the VS Code Python extension to identify improper formatting.

I couldn't find a VSIX file for version 2022.16.1 of the extension, so I went with the closest version I could find to download: v2022.15.12731017

To install a VS Code extension from a VSIX file, open the Command Palette (Ctrl+Shift+P) and use the Install from VSIX... command.

With these older versions now installed on my new Macbook, I once again recreated the auto-formatting scenario.

It worked, too!

Note the following:

I do not have any other formatting extensions.
I do not have anything about Python in my settings.json file.
If I Ctrl+Click for the context menu and choose Format Document With, Python is the only formatting option listed.

Is It Worth It?

Probably not.

I wouldn't go back to an old version of VS Code just for this feature. This would also cause you to miss any new updates.

Recent editions of VS Code give you red squiggly lines to identify this formatting mistake. You should be able to easily see them and correct them on your own.

Note: I said formatting mistake.

If you read the full GitHub discussion I mentioned earlier, the maintainer says the line in question isn't being formatted because it isn't valid Python code.

Instead of considering this to be a formatting issue, it seems VS Code is now handling this as invalid code - an error. Their opinion is this is something you should identify and fix yourself instead of relying on a formatter.

That said, we all now know VS Code was once capable of auto-correcting unwanted line-indentations.

It sure would be cool if a current version of VS Code did this again.

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Patreon: Join my Support Team!

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

What is the Yandex Verification meta tag?

Dave Gray — Wed, 27 Dec 2023 00:00:00 +0000

If you look at the metadata in websites, you may see a meta tag with the name yandex-verification. Here's what it means.

What is Yandex?

According to Wikipedia, Yandex is a Russia based company that owns Yandex Search. The meta tag yandex-verification refers to Yandex Search.

What does yandex-verification do?

yandex-verification is much like google-site-verification. yandex-verification confirms you are the webmaster of your website for Yandex Search.

How can I add yandex-verfication to my website?

Yandex provides webmaster tools. These tools help you add your site and receive your verification code. You then place the code in the yandex-verification meta tag for confirmation.

How to Add yandex-verification with Next.js

To add the yandex-verification meta tag in Next.js, add the following to the metadata object in your root layout.tsx file:

// app/layout.tsx
import type { Metadata } from 'next'

// rest of layout.tsx file here...

export const metadata: Metadata = {
    // rest of metadata object here... 
    verification: {
        google: "YOUR-VERIFICATION-CODE-PROVIDED-BY-GOOGLE",
        yandex: "YOUR-VERIFICATION-CODE-PROVIDED-BY-YANDEX",
    },
}

Don't worry if you haven't added a google-site-verification code to your website. You can learn how by reading my How to Submit Your Sitemap article.

The Result

You should now have a yandex-verification meta tag inside the <head> section of your website.

Here's the meta tag from my website:

<meta name="yandex-verification" content="YOUR-VERIFICATION-CODE-PROVIDED-BY-YANDEX">

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Patreon: Join my Support Team!

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

Robots.txt is NOT Robots meta

Dave Gray — Sat, 16 Dec 2023 00:00:00 +0000

Providing a robots.txt file is not the same as providing robots meta tags for your website.

Robots? On My Website?

To be fair, they probably should have named robots crawlers. As in "web crawler". The name crawler refers to what is also called a bot or robot and is a program. Search engines send these robots out to crawl the web and build their search indexes.

Robots.txt vs Robots Meta Tags: What's the Difference?

Both provide instructions to the bots visiting your website. The level of instruction is the difference.

A robots.txt file applies to your entire website.

Robots meta tags apply specifically to the pages they are in.

Let's look at both in a little more detail...

Robots.txt

A robots.txt file is placed in the root directory of your website. It follows the Robots Exclusion Protocol. A robots.txt file tells robots what they are allowed or not allowed to index. The file is usually very simple. It contains directives for the User-agent (aka "robot"). It also states what files are allowed or disallowed from indexing. A few other optional directives exist like Sitemap, Host, and Crawl-delay.

The robots.txt for my blog looks like this:

User-Agent: *
Allow: /

Sitemap: https://www.davegray.codes/sitemap.xml

The wildcard * character value for User-Agent stands for all robots. Putting a slash / for the Allow value tells robots they are allowed to visit all files on your website.

You can learn more about robots.txt at robotstxt.org. For Next.js, you can learn how to build sitemap and robots.txt files from one of my previous articles.

Robots Meta Tags

Robots meta tags go inside of the <head> element in your web pages. The directions they provide only apply to the page they are within. You can also provide more detailed instructions for bots in your robots meta tags.

MDN provides a detailed table for robots metadata. It lists the possible values you can use in your robots meta tags. My content pages use the index, follow values. In contrast, my tag results pages use the noindex, follow values.

It is also worth noting that you can provide a robots meta tag specific to Google called googlebot. This provides directives specifically for the bot Google crawls websites with.

Here's how I set up my robots metadata in Next.js:

// app/layout.tsx
import type { Metadata } from 'next'

// rest of my layout.tsx file here...

export const metadata: Metadata = {
    // rest of my metadata object here... 
    robots: {
        index: true,
        follow: true,
        googleBot: {
            index: true,
            follow: true,
            'max-video-preview': -1,
            'max-image-preview': 'large',
            'max-snippet': -1,
        }
    },
}

Notice the nested googleBot object that Next.js supports. The googlebot accepts some extra values. You can read about these values in their valid indexing and serving rules list for robots meta tags.

I'm providing max-snippet: -1. This means there is no limit on the number of characters Google can show in their snippet. max-image-preview: large indicates Google may provide a larger image preview of my page. There is also the max-video-preview: -1 setting. It says there is no maximum limit to the number of seconds to use as a video snippet for videos on this page.

Here's the output inside the <head> element of my pages:

<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1">

Next.js orders and merges metadata. Thus, you only need to add this data to your root layout.tsx file. That is unless you want to provide different directives elsewhere. For example, I do provide different directives for my tag results pages, and here is the code:

// app/tags/[tag]/page.tsx

// rest of my page.tsx file here...

export function generateMetadata({ params: { tag } }: Props) {
    return {
        // rest of my metadata object here...
        robots: {
            index: false,
            follow: true,
            googleBot: {
                index: false,
                follow: true,
            }
        },
    }
}

You could say I'm being redundant. I am providing the same directives to the standard robots meta tag and to the googlebot tag. That said, I want to keep my metadata consistent and since I use this pattern on my other pages, I'm using it here, too.

Here is the resulting output inside the <head> element of any given tag results page:

<meta name="robots" content="noindex, follow">
<meta name="googlebot" content="noindex, follow">

Final Considerations

Like the Pirates Code, robots directives are more like guidelines than actual rules. Bad robots can ignore these guidelines. Thus, you should not depend on robots directives. There is no guarantee they will keep your pages from public access or from search indexes.

Check the docs for more examples of robots metadata in Next.js.

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

Automate Open Graph Image Creation in Next.js

Dave Gray — Sun, 10 Dec 2023 00:00:00 +0000

In this article, I'll share how you can dynamically create open graph images with Next.js.

What are Open Graph Images?

An open graph image is only one piece of a much larger set of open graph metadata that helps social media platforms build a display card for your content when it is shared. I previously published a full article on "How to Create Open Graph Social Media Cards" where you can learn much more about the open graph metadata your site needs. When you provide open graph image data in your metadata, the image becomes part of the generated social media card.

Why Generate Dynamic Open Graph Images?

By setting up your Next.js website to dynamically generate open graph images, you are automating part of your workflow. You may not want to do this for all pages on your website, but I believe you will find it very useful.

My Current Workflow

I'm currently using a mixed approach of manual and dynamic open graph images for my blog.

Here's what I do for each blog post:

Manually select an image on the web
Resize it to 1200px wide
Crop it to 1200x630
Save it with the same file name as my blog article
Load it up to the GitHub repository where I store my blog article MDX files

Now that I have typed the steps out, I can really see that there are several additional steps I have to take every time I create a blog post.

In contrast, the open graph images for my homepage and for my tag results pages are dynamically generated by Next.js. The images are created automatically with no extra steps!

What Do Dynamic Open Graph Images Look Like?

They can be as simple or complex as you want to make them.

Here's what my open graph image for the tag nextjs looks like:

And here's what the open graph image for my homepage looks like:

The images I'm dynamically creating with Next.js for my tag results pages are very simple.

The image I'm dynamically creating for my homepage has a more complex layout and fetches some vanity data from both GitHub and YouTube.

Let's look at how both of these are made with Next.js:

1. Specialized Route Handlers

Next.js supports opengraph-image and twitter-image files that can be placed alongside page files in any given route segment. Both of these files are specialized route handlers that will dynamically generate open graph images and twitter images respectively.

Note that twitter images are essentially the same as open graph images but specifically for Twitter (now X). Learn more about the metadata for open graph and twitter in my previous article "How to Create Open Graph Social Media Cards".

The Next.js docs provide some examples of how to generate images using code. I hope you benefit from seeing the code in my opengraph-image.tsx file as well.

My opengraph-image.tsx file has three functions in it:

generateStaticParams
generateImageMetadata
Image

Here is the full code for my opengraph-image.tsx:

// app/tags/[tag]/opengraph-image.tsx 

import { ImageResponse } from "next/og"
import { Inter } from "next/font/google"
import { getPostsMeta } from "@/lib/posts"

const websiteURL = process.env.NODE_ENV === 'production'
    ? 'https://www.davegray.codes/'
    : 'http://localhost:3000/'

const inter = Inter({
    weight: "400",
    subsets: ['latin']
})

export async function generateStaticParams() {
    const posts = await getPostsMeta()

    if (!posts) return []

    const tags = new Set(posts.map(post => post.tags).flat())

    return Array.from(tags).map((tag) => ({ tag }))
}

export async function generateImageMetadata({
    params: { tag }
}: {
    params: { tag: string }
}) {

    return [{
        id: tag,
        size: { width: 1200, height: 630 },
        alt: `Posts about ${tag}`,
        contentType: 'image/png',
    }]
}

export default async function Image({ id }: { id: string }) {

    return new ImageResponse(
        (
            // ImageResponse JSX element
            <div
                className={inter.className}
                style={{
                    fontSize: 184,
                    background: 'black',
                    color: 'white',
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'black',
                    backgroundImage: `url(${websiteURL}images/og-card-bg-1.png)`,
                }}>
                {id}
            </div>
        ),
        // ImageResponse options
        {
            width: 1200,
            height: 630,
        }
    )
}

The generateStaticParams function is identical to the same function in my page.tsx file that generates dynamic pages for the tag results. This function returns an array of tag objects that is passed to the generateImageMetadata function.

The generateImageMetadata function can be used to return multiple images for one route segment. It does this by sending the objects in its returned array to the companion Image function. Note that generateImageMetadata returns an array of objects and each object must include an id value.

The Image function uses the ImageResponse constructor. This function receives the required id parameter from each object provided by the array from generateImageMetadata and creates an image for it. In the above example, you can see I assign my tag value to id in generateImageMetadata, and then I use the id value in the Image function.

2. Static vs Dynamic Output

By default, the dynamically generated images from the specialized route handlers are statically optimized. For something like tag results pages or even blog article pages, that should be good.

However, that will not be good if you need to fetch constantly updated data like the vanity metrics in the image for my homepage.

No worries!

You can change the static behavior with individual fetch options or route segment options.

Below is the code in my opengraph-image.tsx file for my homepage:

// app/opengraph-image.tsx 

import { ImageResponse } from 'next/og'
import { Inter } from 'next/font/google'
import { FaYoutube, FaGithub } from 'react-icons/fa6'

const websiteURL = process.env.NODE_ENV === 'production'
    ? 'https://www.davegray.codes/'
    : 'http://localhost:3000/'

export const runtime = 'edge'

const inter = Inter({
    weight: "400",
    subsets: ['latin']
})

// Image metadata
export const alt = 'Preview image for Dave Gray'

export const size = {
    width: 1200,
    height: 630,
}

export const contentType = 'image/png'

export default async function Image() {

    const githubData = fetch(`https://api.github.com/users/gitdagray`, {
        next: {
            revalidate: 0,
        }
    }).then((res) =>
        res.json()
    )

    const youtubeData = fetch(`https://youtube.googleapis.com/youtube/v3/channels?part=statistics&id=UCY38RvRIxYODO4penyxUwTg&key=${process.env.YOUTUBE_API_KEY}`, {
        headers: {
            Accept: 'application/json',
        },
        next: {
            revalidate: 0,
        }
    }).then((res) =>
        res.json()
    )

    const [{
        followers: githubFollowers,
        bio: githubBio,
        name: githubName,
    },
        { items: youtubeItems }
    ] = await Promise.all([githubData, youtubeData])

    const ytSubCount = youtubeItems?.length
        ? youtubeItems[0].statistics.subscriberCount
        : null

    return new ImageResponse(
        (
            // ImageResponse JSX element goes here
        ),
        // ImageResponse options
        {
            // For convenience, you can re-use the exported opengraph-image size config to also set the ImageResponse's width and height.
            ...size,
        }
    )
}

You can see the opengraph-image.tsx file above is similar but still very different from the previous example I gave.

This file is used to create one image. I am not using the generate functions that I used in the dynamic route segment for tags. Therefore, I define three exports for image metadata: alt, size, and contentType.

I am also using the edge runtime in this file. If you look at the runtime differences, you will see that edge does not support static rendering.

When you use the edge runtime, the revalidate route segment config option is not available. Because of this, I set revalidate to zero in each of the fetch requests instead.

The fetch requests use the Parallel Data Fetching pattern with Promise.all.

I did not share the HTML utilizing inlined CSS that makes up the JSX Element of the ImageResponse. It is truly an uglier version of the first example. Why create such ugliness with inline CSS? This question leads me to a discussion about the developer experience using the ImageResponse API. I will talk about that near the end of this article.

3. Output

The resulting output of this file is the open graph image I shared above that includes up-to-date vanity metrics. An updated image will be provided when my homepage is shared.

The only caveat is some social media sites prefer to cache open graph images. Adding any random parameter to the URL like ?dave or ?reset=1 should get the site to grab the latest image for your post.

When you create dynamic open graph images, Next.js also adds the related meta tags inside the <head> element of your website. Inspect your page with devtools, and you should find the following meta tags, but they may not be next to each other or in this order:

<meta property="og:image" content="https://www.davegray.codes/tags/nextjs/opengraph-image/nextjs?e6574072cc5e5cea">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Posts about nextjs">
<meta property="og:image:type" content="image/png">

4. Twitter Images (X.com)

Everything discussed above also applies to the twitter-image.tsx files you can create as well. The only difference between my opengraph and twitter files is the background image I applied to each and the chosen color of an icon. Share my homepage on X.com and on LinkedIn to see the difference. You can do the same with my tag results pages like the one for articles tagged with nextjs.

Here's what my twitter image for the tag nextjs looks like:

And here's what the twitter image for my homepage looks like:

The metadata Next.js creates for your twitter-image is different than the metadata for your opengraph-image. Here are the meta tags you should find inside your <head> element:

<meta name="twitter:image" content="https://www.davegray.codes/tags/nextjs/twitter-image/nextjs?6f38845728b6d005">
<meta name="twitter:image:width" content="1200">
<meta name="twitter:image:height" content="630">
<meta name="twitter:image:alt" content="Posts about nextjs">
<meta name="twitter:image:type" content="image/png">

5. View Your Images

In dev mode, you can open up devtools, grab the URL for your open graph image from the meta tag, and paste it into another browser tab to display your image.

After you deploy your site, you can check your live URLs in several ways:

Facebook Sharing Debugger
LinkedIn Post Inspector
Create a draft post on any social media and preview the card without actually posting

The last suggestion is the only way to currently test images on X.com. The site previously allowed you to test with a Twitter Card Validator. However, it no longer previews images.

Remember: Add a random parameter to the end of your URL to get the social media sites to refresh their cached image: ?random, ?abc, etc.

6. The Developer Experience

The specialized route handlers opengraph-image and twitter-image were introduced in Next.js version 13.3. If you already know how to create dynamic pages in Next.js, these files follow that pattern. This makes the learning curve intuitive.

One noticeable impact to the DX while working with these files - especially while tweaking the CSS - is that the image does not automatically update after you save your changes. You are probably used to your Next.js app doing that for you, but for these image route handlers, you must make a new request by hitting refresh in your browser in order to see your changes. This is simply how the web works though and should not reflect on Next.js in a negative way. You might want to use a browser extension like Auto Refresh Page that refreshes the page for you at a regular interval while you work on these.

The ImageResponse constructor is limited in what it supports. I mentioned ugly code earlier. The ugliness is really due to limited support for CSS properties and the need to inline all CSS with style. I would prefer to use Tailwind as I have on the rest of my site instead of applying inline styles. Not all CSS styles are supported either. I would like to see more support for CSS and possibly Tailwind inside of the ImageResponse constructor.

7. An Additional Option

You can learn a lot by looking at leerob's blog repo which is open to the public. As of this writing (December 2023), Lee's blog has not yet adopted the specialized opengraph-image and twitter-image files. Instead, he is using a standard route handler file to dynamically create his open graph images, and that is always an additional option.

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

Light & Dark Mode in Next.js App Router + Tailwind with No Flicker

Dave Gray — Mon, 04 Dec 2023 00:00:00 +0000

Applying light and dark mode themes with TailwindCSS is easy. However, if you want to allow users to toggle between light and dark mode themes while also identifying the system preference setting at load time and avoiding a page flicker, things get a little more complicated.

Why This Is Challenging

Next.js generates static pages on the server before sending them to the browser (aka "the client"). This helps keep things fast and websites seem snappy, but the server cannot read what user preferences will be. The server has no idea in advance that John prefers light-mode in his browser and Jane prefers dark-mode in her browser.

The best you can do is apply the TailwindCSS dark mode variant in advance that will read the prefers-color-scheme user system setting and apply the dark mode theme if that is preferred.

When you want to allow a user to manually toggle the light-dark mode theme setting, you need to read the system preference first. If they do toggle the setting, you want to save the new setting in localStorage. However, localStorage is only available in the browser. Your server components won't be able to read this setting, and this situation can cause a theme flash when your site loads due to an incorrect theme being applied for a split second.

Fortunately, the next-themes package can help avoid this issue while allowing users the ability to toggle between light and dark mode in your Next.js website.

Here's how I applied next-themes with TailwindCSS to my blog:

1. Edit your TailwindCSS config file

You need to make one addition to your tailwind.config.ts file if you want to toggle dark mode manually. You must add a darkMode setting with a class value.

// tailwind.config.ts 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // ...
}

2. next-themes

Now you are ready to add next-themes to your project by typing the following in your terminal:

npm i next-themes

The next-themes GitHub repository provides directions for use with the Next.js App Router. The directions do not include TypeScript, but I'm adding some TypeScript below.

First, create a providers.tsx file inside your app folder like this:

// app/providers.tsx
'use client'

import { ThemeProvider } from 'next-themes'

export function Providers({ children }: { children: React.ReactNode }) {
    return <ThemeProvider attribute="class" defaultTheme='system' enableSystem>{children}</ThemeProvider>
}

Next, add the <Providers> component to your root layout.tsx by placing it inside the <body> tag:

// app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>
            {children}
        </Providers>
      </body>
    </html>
  )
}

3. suppressHydrationWarning

Notice the suppressHydrationWarning setting inside the <html> tag. As noted in the GitHub repo for next-themes, if you do not apply this setting, you will get warnings because the <html> element is being updated by next-themes.

The React docs discuss suppressHydrationWarning. The use of it by next-themes is exactly as intended. You are telling Next.js you want to override what the server may have sent because it does not match the user setting saved in localStorage.

4. useTheme

Your implementation of next-themes is not complete until you create a component allowing users to manually change the themes. I called my component ThemeSwitch.tsx.

Here it is:

// app/components/ThemeSwitch.tsx
'use client'

import { FiSun, FiMoon } from "react-icons/fi"
import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'
import Image from "next/image"

export default function ThemeSwitch() {
  const [mounted, setMounted] = useState(false)
  const { setTheme, resolvedTheme } = useTheme()

  useEffect(() =>  setMounted(true), [])

  if (!mounted) return (
    <Image src=`data:image/svg+xml;base64,PHN2ZyBzdHJva2U9IiNGRkZGRkYiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMCIgdmlld0JveD0iMCAwIDI0IDI0IiBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4PSIyIiB5PSIyIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHJ4PSIyIj48L3JlY3Q+PC9zdmc+Cg==`
      width={36}
      height={36}
      sizes="36x36"
      alt="Loading Light/Dark Toggle"
      priority={false}
      title="Loading Light/Dark Toggle"
    />
  )

  if (resolvedTheme === 'dark') {
    return <FiSun onClick={() => setTheme('light')} />
  }

  if (resolvedTheme === 'light') {
    return <FiMoon onClick={() => setTheme('dark')} />
  }

}

There's a lot going on above, but I'll guide you through.

The goal is to allow users to click an icon to change the theme. If they click the sun icon provided with dark mode, they will switch to light mode, and if they click the moon icon provided with light mode, they will switch to dark mode.

I start by importing the icons I want to use. Then I bring in both useState and useEffect followed by useTheme from next-themes and the <Image> component from Next.js.

You must keep track of the mounted state because you cannot use the setTheme function from the useTheme hook unless you know your code is running in the browser. Without this check, you will get a hydration mismatch warning when initially rendering the component on the server. Components rendering on the server will not use hooks and cannot access client-side localStorage.

You need to set the mount state inside of the useEffect hook that only runs on component mount in the client when it has an empty dependency array. This insures it will only run in the browser.

If the component is not mounted, it renders a placeholder image to avoid cumulative layout shift.

If the component is mounted, it checks the resolvedTheme value from the useTheme hook and provides the correct icon.

Note: I did not have to add code for saving the theme choice in localStorage. next-themes handles that for you.

5. End Result

You should now have a Next.js website that not only applies the user system preference, but also remembers any user changes to the light and dark mode theme preference specifically for your site. Therefore, a user may have a system preference of light mode, but can still choose a default dark mode for your website.

This should not result in a page flash, but the next-themes docs do say your website may still flash in dev mode. Even if so, in production mode, there should be no flash.

I have implemented next-themes with TailwindCSS on my blog as of this writing. Please check it out if you want to see a deployed example.

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave