Building a Linktree Clone!

Lee starts with a simple JSON structure for a profile: a name, avatar, links with titles and URLs, and social accounts. He considers optional images for links and notes that keeping content separate from the application would let people update it without redeploying.

He sets up Tailwind in a Pages Router project, then builds a profile header, link cards, and social icons. The styling includes a gradient background, responsive spacing, and optional link images. For external destinations, he uses ordinary anchor tags rather than Next.js Link.

Lee migrates the page to Next.js 13’s App Router, creating a root layout and moving the route into `page.tsx`. He explains that the layout replaces `_app` and `_document`, and that server components run on the server by default. He also notes that server components can reduce client-side JavaScript.

He moves the JSON profile into Vercel Edge Config and reads it from an async server component. The migration requires pulling environment variables locally and adding types for the returned data; Lee mentions schema validation as another option. He adds a fallback redirect for missing data.

Lee finds that the production build treats the Edge Config data as static, so he sets `dynamic` to `force-dynamic` to fetch fresh data on each request. He explains that the App Router can support static, dynamic, and revalidated data at the fetch level, though the demo makes the whole page dynamic. He deploys the finished profile page.