Robinson introduces a minimal redesign with a static homepage, an About page, an MDX blog, and a server-rendered guestbook. He uses Contentlayer to generate typed content from Markdown files in the repository, with Remark and Rehype plugins for features such as heading links and highlighting.
Code Walkthrough for Next.js 13 / Tailwind CSS / MySQL App!
Speaker
Lee Robinson, a developer at Vercel, walks through his personal website’s Next.js 13 app and codebase on his leerob channel.
He explains that App Router files are React Server Components by default, with client components added for interactivity such as the animated sidebar. Async components fetch data directly, while the homepage uses incremental static regeneration to refresh its GitHub, Twitter, and blog view data at most every 60 seconds. Blog views and guestbook entries use PlanetScale MySQL with Kysely, and the guestbook checks the user session on the server.
The blog index imports typed posts from Contentlayer, sorts them by publication date, and links to dynamic post pages. Robinson describes generating static post routes with `generateStaticParams`, fetching tweet data for embedded posts, and building per-post metadata and Open Graph images. A client-side view counter calls an API route to read or increment counts stored in the database.
The guestbook form submits to an API route and refreshes the route so new entries appear without a full page reload. Robinson also shows MDX components for links, images, callouts, and tweets, plus a Framer Motion sidebar whose active indicator animates vertically on desktop and horizontally on mobile. A setup script replaces his personal content and images with placeholders so others can start from the repository.
Takeaways
- Use server components for data fetching and client components where the UI needs interaction.
- Keep blog content in version-controlled MDX and generate typed access to it with Contentlayer.
- Use ISR when mostly static pages need periodic data updates, such as every 60 seconds.
- Type database queries with a schema-aware query builder to catch invalid table and column references.
- A setup script that replaces personal content with placeholders can make a starter repository easier to adopt.
Mentioned in this talk
Search inside this talk
What was claimed 15
- usesLee Robinson uses
Next.jsNext.js 13 App Router“updated to use the latest Next.js features”
YouTube Unverified1 source· Talk
- usesLee Robinson uses Tailwind CSS
“I'm using Tailwind for the styling.”
YouTube Verified2 sources· Talk
- usesLee Robinson uses
PlanetScaleMySQL database“They pull the different blog views from PlanetScale, my MySQL database.”
YouTube Unverified1 source· Talk
- usesLee Robinson uses Markdown
“These use MDX and are rendered using server components”
YouTube Unverified1 source· Talk
- featureFramer Motion: Spring-style animation
“It's got a spring-motion animation to make it feel really fluid and natural.”
YouTube Unverified1 source· Talk
- usessidebar and logo animations
“I'm using Framer Motion on the left for this really sleek transition”
YouTube Unverified1 source· Talk
- usespage views and traffic analytics
“Vercel Analytics for tracking my page views and traffic analytics.”
YouTube Unverified1 source· Talk
- usesLee Robinson uses Contentlayertyped access to Markdown content
“Contentlayer, which is the tool that allows me to have type-safe access to my content”
YouTube Unverified1 source· Talk
- featureNext.js: App Router pages use React Server Components by default
“Inside this app directory, everything is a React Server Component by default.”
YouTube Unverified1 source· Talk
- featureNext.js: Revalidate pages at most every 60 seconds
“for this page, I want to revalidate at most every 60 seconds”
YouTube Unverified1 source· Talk
- usesLee Robinson uses
swrview count revalidation“I'm using SWR for revalidation when I navigate back.”
YouTube Unverified1 source· Talk
- usesLee Robinson uses Kyselytype-safe query builder
“I'm using MySQL with Kysely.”
YouTube Unverified1 source· Talk
- usesLee Robinson uses Vercel OGdynamic Open Graph image generation
“I'm going to have an OG image using the Vercel OG package to dynamically generate images”
YouTube Unverified1 source· Talk
- usesLee Robinson uses NextAuth.jsGitHub authentication for the guestbook
“This is a new improvement in NextAuth.js that lets me fetch the session inside a server component.”
YouTube Unverified1 source· Talk
- usesGitHub star count
“I'm using the GitHub Octokit API, or SDK, to make that a little bit easier.”
YouTube Unverified1 source· Talk
