Banner

Import

1import { Banner } from "@/components/atoms/Banner";

One liner

Note that I'm using Next.js with the Page Router for this article.

Multiple lines

Be aware of hydration mismatches

If you're seeing this lil' tutorial and have recently updated to the latest Next.js version (> 13.0), make sure to follow these instructions to avoid any hydration mismatches between what's on the client and on the server while using theme ternaries to toggle dark & light modes.