DEV Community: Craftly-dev

Custom Domains for Next.js: The Cloudflare + Vercel Setup That Works in 2026

Craftly-dev — Sun, 19 Apr 2026 11:18:58 +0000

You shipped a Next.js app to Vercel. It's live at your-project-xxx.vercel.app\. Everything works, but the URL looks like a throwaway demo.

Getting a real domain is a 30-minute task, but it's easy to make mistakes that cost you SSL certificates, SEO, or deliverability.

Here's the exact flow I used to move my template business from a vercel.app URL to my own domain. Production-tested, 2026-current.

The Stack

Registrar: Cloudflare Registrar (at-cost pricing)
DNS: Cloudflare DNS (free, fastest propagation)
Hosting: Vercel
Email Routing: Cloudflare Email Routing (free receiving)
Email Sending: Loops.so

Zero monthly cost except the domain itself (~$12/year for .dev).

Step 1: Buy the Domain on Cloudflare

Use Cloudflare Registrar, not Namecheap or GoDaddy. Prices are wholesale, WHOIS privacy is free, and DNS is managed in the same dashboard.

dash.cloudflare.com → Domain Registration → Register Domain
Search your domain
2 years with auto-renew ON
Pay. Domain is yours in ~60 seconds

Step 2: Add the Domain to Vercel

Open your Vercel project → Settings → Domains
Click Add Domain
Enter your domain
Uncheck "Redirect to www" — apex as canonical is cleaner in 2026
Save

Vercel shows Invalid Configuration. Expected.

Step 3: Get DNS Records

Click Edit in Vercel → Manual setup. Vercel shows:

\Type: CNAME Name: @ Value: <project-hash>.vercel-dns-xxx.com \\

Vercel is migrating from the old A record (76.76.21.21) to CNAME-based records.

Step 4: Add to Cloudflare DNS

Cloudflare → your domain → DNS → Records → Add record:

\Type: CNAME Name: @ Target: <Vercel-provided value> Proxy: DNS only (gray cloud) ← CRITICAL TTL: Auto \\

Why DNS only matters: Cloudflare proxy ON intercepts HTTPS, so Vercel can't issue SSL. Keep it gray.

Step 5: Wait for Verification

Vercel auto-detects propagation in 2-10 minutes. Green check = done.

The Apex CNAME Gotcha

DNS spec (RFC 1912) doesn't allow CNAMEs on apex. Cloudflare solves this with CNAME Flattening — internally resolves to IP, returns A record. You don't do anything special.

AWS Route 53 calls this "ALIAS". Google Cloud DNS has similar. If your DNS provider doesn't support this, use A record with Vercel's IP instead.

301 Redirects from Old URL

\\

Originally published on Craftly.

Check out our premium templates:

Built with Next.js 16, TypeScript, and Tailwind CSS v4.

How to Build an Admin Dashboard with Next.js in 2026

Craftly-dev — Sun, 19 Apr 2026 11:11:26 +0000

Why Dashboards Matter for SaaS

Every SaaS product eventually needs an admin dashboard. Whether it's monitoring revenue, tracking active users, or managing customer accounts, dashboards are where data becomes actionable. A well-built dashboard is often the difference between a product that feels professional and one that feels like a prototype.

Yet dashboards are notoriously time-consuming to build from scratch. You need charts that work, tables that sort and filter, a sidebar that collapses on mobile, stat cards that update in real time, and a layout that stays coherent at every screen size. Get any one of these wrong and the whole thing falls apart.

In 2026, Next.js 16 with Tailwind CSS v4 is the strongest foundation for building admin dashboards. Here's how to approach it.

Key Components of a Modern Dashboard

Stat Cards

Stat cards are the first thing users see — a row of KPI tiles showing the numbers that matter most: total revenue, active users, conversion rate, churn. A good stat card includes the current value, a comparison to the previous period, and a trend indicator (up/down arrow with color coding).

\`tsx
interface StatCardProps {
label: string;
value: string;
change: number;
changeLabel: string;
}

export function StatCard({ label, value, change, changeLabel }: StatCardProps) {
const isPositive = change >= 0;
return (

{label}

{value}

{isPositive ? "+" : ""}{change}% {changeLabel}

);
}
`\

Keep stat cards in a 2x2 or 4-column grid on desktop, stacking to a single column on mobile.

Charts

Charts are where most dashboard projects get complicated. You need to choose a library, understand its API, and make it work with your data format.

Choosing a Charting Library: Recharts vs Chart.js vs Tremor

Recharts is the most popular choice for React dashboards. It's built on SVG, composable, and integrates naturally with React's component model. The API is declarative and easy to read.

\`tsx
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";

export function RevenueChart({ data }: { data: { date: string; revenue: number }[] }) {
return (

);
}
`\

Chart.js (via react-chartjs-2) is battle-tested and has more chart types, but the API is more imperative and less idiomatic in React. Good for teams coming from a non-React background.

Tremor provides pre-built dashboard components including charts, stat cards, and tables. It's the fastest path to a working dashboard, but less flexible for custom designs.

For most SaaS dashboards, Recharts is the right choice. It's flexible, actively maintained, and the community is large.

Data Tables

Tables are the most common dashboard component and the easiest to get wrong. A production-grade data table needs:

Sortable columns (click header to sort, click again to reverse)
Pagination (server-side for large datasets, client-side for small ones)
Search and filter
Row selection for bulk actions
Responsive behavior (horizontal scroll or card view on mobile)

Build your table as a generic component that accepts column definitions and row data. This makes it reusable across different sections of the dashboard.

Sidebar

The sidebar is the backbone of your dashboard navigation. In 2026, the standard pattern is:

Desktop: Fixed sidebar, 240px wide, with icons and labels
Tablet: Collapsible sidebar, icons-only mode
Mobile: Off-canvas drawer, triggered by a hamburger menu

\`tsx
"use client";

import { useState } from "react";

export function Sidebar() {
const [collapsed, setCollapsed] = useState(false);

return (

setCollapsed(!collapsed)}>
{collapsed ? "Expand" : "Collapse"}

{/* nav items */}

);
}
`\

Store the collapsed state in localStorage\ so it persists across page loads.

Data Architecture: The Single Data File Pattern

The cleanest approach for dashboard data is a single data file that exports everything the dashboard needs. This keeps your mock data organized and makes it easy to swap in a real API later.

\`ts
// data/dashboard.ts
export const stats = [
{ label: "Total Revenue", value: "$48,295", change: 12.5, changeLabel: "vs last month" },
{ label: "Active Users", value: "2,847", change: 8.2, changeLabel: "vs last month" },
{ label: "Conversion Rate", value: "3.4%", change: -0.6, changeLabel: "vs last month" },
{ label: "Churn Rate", value: "1.2%", change: -0.3, changeLabel: "vs last month" },
];

export const revenueData = [
{ date: "Jan", revenue: 32000 },
{ date: "Feb", revenue: 38000 },
// ...
];

export const recentOrders = [
{ id: "ORD-001", customer: "Alice Johnson", amount: "$299", status: "Paid" },
// ...
];
`\

This pattern works for templates, prototypes, and early-stage products. When you're ready to connect a real API, replace the imports with fetch\ calls — the components don't need to change.

Dark Mode Implementation

Dashboard users are almost universally power users who prefer dark mode. Implement it with CSS variables so the switch is instant and doesn't cause a flash of wrong theme.

\`css
/* globals.css */
@import "tailwindcss";

@theme inline {
--color-background: #ffffff;
--color-foreground: #0f172a;
--color-card: #f8fafc;
--color-border: #e2e8f0;
}

.dark {
--color-background: #0f172a;
--color-foreground: #f8fafc;
--color-card: #1e293b;
--color-border: #334155;
}
`\

Store the preference in localStorage\ and apply the .dark\ class to <html>\ before the first paint to avoid flicker:

\tsx // app/layout.tsx — inline script runs before React hydrates const themeScript = \
const theme = localStorage.getItem("theme") ?? "dark";
document.documentElement.classList.toggle("dark", theme === "dark");
`;

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (

{children}

);
}
`\

Responsive Sidebar Patterns

The sidebar needs fundamentally different behavior at different breakpoints:

Large screens (lg+): Persistent sidebar. The main content shifts right when the sidebar is open. Use CSS Grid or Flexbox with a fixed-width sidebar column.

Medium screens (md): Icon-only sidebar. Keep navigation accessible without consuming too much horizontal space.

Small screens (sm and below): Off-canvas drawer. The sidebar slides in from the left over the content. A backdrop overlay closes it when tapped.

\`tsx
// Use Tailwind's responsive prefixes to handle this declaratively

{children}

`\

Getting Started Fast

Building a production-quality admin dashboard from scratch takes weeks. You need to get every component right, handle responsive behavior at every breakpoint, wire up dark mode, and make sure charts look good in both themes.

Craftly's Dashboard template ($39) ships with all of this pre-built: stat cards, Recharts integration, a sortable data table, responsive sidebar with collapse state, and full dark mode. The single data file pattern means you can customize the content without touching the component code.

In the meantime, the patterns above give you everything you need to build your own. Start with the layout and sidebar — get those right and the rest of the components slot in cleanly.

A great admin dashboard isn't about the number of charts or the complexity of the data. It's about making the right numbers immediately visible and actionable. Focus on that, and the technical decisions become clearer.

Browse Craftly's template collection for production-ready Next.js templates built with these patterns from the ground up.

Originally published on Craftly.

Check out our premium templates:

Built with Next.js 16, TypeScript, and Tailwind CSS v4.

Next.js 16 App Router: The Complete Guide for 2026

Craftly-dev — Sun, 19 Apr 2026 07:19:55 +0000

What Is the App Router?

The App Router, introduced in Next.js 13 and now the default in Next.js 16, is a file-system based router built on top of React Server Components. It lives in the app/\ directory and replaces the older pages/\ router as the recommended approach for all new projects.

If you're still building with pages/\, the App Router isn't just a new feature — it's a fundamentally different mental model. Understanding it properly will make you a significantly more effective Next.js developer.

Server Components vs. Client Components

This is the most important concept in the App Router. Every component in the app/\ directory is a React Server Component (RSC) by default.

Server Components

Server components render on the server and send HTML to the browser. They can:

Fetch data directly using async/await\
Access server-only resources (databases, environment variables)
Import server-only packages without sending them to the client

\tsx // app/blog/page.tsx — runs entirely on the server export default async function BlogPage() { const posts = await db.query("SELECT * FROM posts"); return <PostList posts={posts} />; } \\

Because server components never ship JavaScript to the browser, they reduce your bundle size dramatically. No useEffect\, no hydration overhead.

Client Components

Client components are the ones you're used to from React. They run in the browser and can use hooks, event listeners, and browser APIs. To opt into client rendering, add "use client"\ at the top of the file:

\`tsx
"use client";

import { useState } from "react";

export function Counter() {
const [count, setCount] = useState(0);
return setCount(c => c + 1)}>{count};
}
`\

When to Use "use client"

A common mistake is marking too many components as client components. Use "use client"\ only when the component needs:

React state (useState\, useReducer\)
Effects (useEffect\, useLayoutEffect\)
Browser APIs (window\, document\, localStorage\)
Event listeners
Third-party libraries that require a browser environment

Pass server-fetched data down to client components as props. Keep the boundary as close to the leaf as possible.

The params Promise API (Breaking Change in Next.js 15+)

This is the biggest breaking change you'll encounter when upgrading. In Next.js 15 and 16, params\ and searchParams\ in page components are now Promises, not plain objects.

Before (Next.js 14)

\tsx // Old — params is a plain object export default function PostPage({ params }: { params: { slug: string } }) { return <h1>{params.slug}</h1>; } \\

After (Next.js 15+)

\tsx // New — params is a Promise export default async function PostPage({ params, }: { params: Promise<{ slug: string }>; }) { const { slug } = await params; return <h1>{slug}</h1>; } \\

This change enables better streaming and parallel data fetching. It affects every dynamic route in your app, so update all page components when migrating.

generateStaticParams

For dynamic routes, generateStaticParams\ tells Next.js which paths to pre-render at build time. This is the App Router equivalent of getStaticPaths\:

\tsx // app/blog/[slug]/page.tsx export async function generateStaticParams() { const posts = await fetchAllPosts(); return posts.map((post) => ({ slug: post.slug })); } \\

Any path not returned by generateStaticParams\ will be rendered on-demand (or return 404, depending on your dynamicParams\ setting). For blogs and docs, always use generateStaticParams\ — pre-rendered pages are faster and reduce server load.

generateMetadata

Dynamic metadata for SEO is handled by generateMetadata\, an async function that runs on the server:

\`tsx
export async function generateMetadata({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const post = await fetchPost(slug);

return {
title: post.title,
description: post.description,
openGraph: {
title: post.title,
images: [post.ogImage],
},
};
}
`\

This gives every page unique, accurate metadata without client-side workarounds. Combined with static generation, it produces near-perfect SEO scores.

File Conventions: layout, loading, error

The App Router introduces special file names that automatically wrap your pages:

layout.tsx

Layouts wrap pages and persist across navigations. The root layout is required and must include <html>\ and <body>\ tags:

\tsx // app/layout.tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ); } \\

Nested layouts let you share UI across groups of pages without re-rendering on navigation.

loading.tsx

Create a loading.tsx\ file to show a loading UI while a page or layout is fetching data. Next.js wraps the page in a <Suspense>\ boundary automatically:

\tsx // app/blog/loading.tsx export default function Loading() { return <div className="animate-pulse">Loading posts...</div>; } \\

error.tsx

An error.tsx\ file catches runtime errors in that segment and displays a fallback UI. It must be a client component:

\`tsx
"use client";

export default function Error({ reset }: { reset: () => void }) {
return (

Something went wrong.

Try again

);
}
`\

Performance Tips

1. Fetch data at the component level. Server components can fetch their own data in parallel. No more prop-drilling data through component trees.

2. Use React.cache\ to deduplicate requests. If multiple components fetch the same resource, wrap the fetch in cache()\ to avoid redundant database calls.

3. Prefer static over dynamic rendering. Static pages are faster, cheaper, and cached by default. Only use dynamic = "force-dynamic"\ when the page genuinely needs fresh data on every request.

4. Stream with Suspense. Wrap slower data-fetching components in <Suspense>\ so fast parts of the page render immediately while slower parts load in the background.

5. Optimize images with next/image\. It handles lazy loading, resizing, and format conversion automatically. Never use plain <img>\ tags in production.

Putting It All Together

The App Router might feel like a lot to take in, but the mental model is consistent: server components by default, client components only when you need interactivity, and file conventions to handle loading, error, and layout states.

All Craftly Next.js templates are built with these patterns baked in — proper layout nesting, generateStaticParams\ for dynamic routes, generateMetadata\ for SEO, and "use client"\ used sparingly at the leaf level. It's the best way to see these patterns in production-quality code.

If you want to accelerate your Next.js development, check out Craftly's template collection — every template is built with Next.js 16, TypeScript, and App Router best practices from the start.

Originally published on Craftly.

Check out our premium templates:

Built with Next.js 16, TypeScript, and Tailwind CSS v4.

I Used Claude Design on Day 2. Here's What Web Designers Should Know.

Craftly-dev — Sun, 19 Apr 2026 03:05:08 +0000

Anthropic launched Claude Design two days ago. I spent day two putting it through a real test — an hour-long session where I asked it to generate design artifacts for a working business with a real codebase and an existing brand.

This is an honest field report. Not a hype piece, not a doom piece. What worked, what didn't, and what I think it means for web designers going forward.

What is Claude Design

Claude Design is a new product from Anthropic Labs, powered by Opus 4.7. You describe what you want, it generates visual output — prototypes, slide decks, one-pagers, design system artifacts. It reads your codebase and existing design files to maintain consistency.

Available to paid Claude subscribers at claude.ai/design.

The Test

I'm an indie product builder. I wanted to see how far Claude Design could go when handed inputs typical of a real engagement:

A repo with existing code
A brand logo (a gradient geometric mark)
A paragraph of brand voice (dark-first palette, OKLCH colors, tight typography)

Then I asked it to produce production-grade marketing artifacts.

What It Generated

In one conversational session, it produced:

A complete design system CSS file — brand colors (hex + OKLCH), dark/light semantic tokens, gradients, shadows, radii, spacing scale, and typography preset classes.
17 preview HTML cards covering every token and component category (colors, type scales, components, utilities).
A React UI kit recreating a marketing site — 10+ .jsx\ files with components, inline Lucide icons, and an interactive demo.
A set of 1280x720 cover-image HTML files, each with a distinct accent gradient but sharing a unified layout system.

Because I asked for code, each of these landed as text files — HTML, CSS, JSX, Markdown — that I could read and edit. (If I'd asked for images or PNGs, it would have produced those instead.)

The Good Part: It Really Did Get Easier

Let me be specific about what "easier" means here, because it's the real story.

The workflow is conversational, not point-and-click

The biggest shift from Figma or Canva. I didn't drag rectangles or manipulate layers. I wrote:

"Create a cover image with a browser mockup of a landing page on the right and title + price on the left."

And it generated that. When I wanted changes, I described them in English:

"The logo in the output is wrong — here's the correct one."

Fixed. No layer inspector, no components panel, no constraint editor. Just description.

When you ask for code, you get code

Ask for HTML, CSS, or JSX and Claude Design outputs exactly that — version-controllable text, not a proprietary design file. You can git add\ a session's output directly. (PNG export is also there when you ask for it — but the default for code-oriented prompts is working code.)

A beginner can ship something decent with this alone

This is the part I want to be loud about. If you have an idea and zero design background, you can now produce a coherent-looking landing page, a usable color system, and marketing covers in one afternoon. "I'm not a designer" is no longer an acceptable excuse for shipping ugly things.

For a hobby project, a side hustle MVP, or a quick pitch deck, Claude Design alone is enough. Really.

The Honest Part: "Decent" and "Great" Are Different Tiers

Here's the thing people won't tell you in the launch-week hype.

Claude Design hands you a solid baseline in minutes. But the gap between "solid baseline" and "actually good" still costs knowledge, taste, and iteration — and AI can't skip that for you.

Where the baseline falls short

First-pass outputs drift. Three or four iterations were normal — wrong asset pulled from the repo, proportions slightly off, spacing rhythm inconsistent between screens. If you don't see the drift, you ship it.
Fine control is harder than big direction. "Apply a subtle mesh gradient with grain overlay" works instantly. Dialing in exact grain intensity so it reads as texture instead of noise? I dropped into the CSS myself.
It has no taste about your taste. It matches a plausible style guide given your inputs. Whether that's the right style for your audience, your positioning, your category — it can't tell you. Only you can.
Systems thinking is still yours. AI happily generates ten cover variations. Deciding which three ship, what the naming convention is, how this scales to the next twenty covers — that's a systems problem, not a generation problem.

The knowledge that still pays off

If you actually want output that looks considered rather than just competent, you still need to know things like:

Why this spacing scale and not a different one
When a gradient reads as premium vs. when it reads as dated
How type contrast actually works (not just "bigger + bolder")
What a design system's job is beyond "list of colors"
How to read a layout and diagnose why it feels off

Nothing about Claude Design changes that. It just makes the generation step cheap, so the knowledge-shaped bottleneck shows up earlier and more visibly.

What This Means for Different People

If you're a beginner or non-designer

Great news. The floor just rose dramatically. You can ship things that don't look embarrassing, without six months of design study first. Use it.

Just don't confuse "no longer embarrassing" with "great." If your goal is something that resonates beyond "acceptable," you'll still hit a ceiling that only design knowledge removes.

If you're a working designer

Your execution speed is no longer the thing that makes you valuable. Anyone with a prompt can generate variations now. What compounds is:

Judgment — which of the ten outputs ships
Direction — what should be made in the first place
Craft at the edges — the 20% of polish AI won't reach by default
Systems — turning one-off artifacts into reusable, consistent work

These are all things AI accelerates your process around, not things it replaces.

If you're a design system maintainer

Probably the biggest shift. Claude Design reads your codebase and generates artifacts that match your existing tokens. Grunt work — refreshing preview pages, recreating examples, documenting new components — becomes near-free. The human role concentrates on defining principles and reviewing output for consistency.

What To Actually Do

Don't panic, don't dismiss. "AI will kill design" and "AI is just a toy" are both wrong for the same reason — they skip the part where how you use it decides the outcome.

Learn prompt craft, but don't stop there. Describing visual work precisely is a real skill. But a great prompt without design knowledge still produces mediocre design faster. Prompt craft is a multiplier; knowledge is the base number.

Keep studying the fundamentals. Type, hierarchy, rhythm, color, systems. The floor went up — so the relative value of being above the floor went up too.

Integrate it, don't fight it. Use AI for first drafts, exploration, system documentation, mundane asset generation. Reserve your focus for decisions and polish that actually need you.

The Honest Bottom Line

Claude Design makes "decent output" trivially easy. That's a big deal — a beginner can ship something they'd have been embarrassed to ship a year ago.

But "decent" and "great" are still different tiers, and the gap between them is still paid in knowledge and judgment. AI shrinks the distance from "idea" to "baseline." It doesn't shrink the distance from "baseline" to "considered, intentional, well-crafted work."

Which, honestly, is the best possible outcome. The boring part got cheap. The interesting part — knowing what's worth making, and making it well — is still where humans live.

Looking for hand-crafted, production-ready Next.js templates with careful attention to detail? Take a look at Craftly — Tailwind v4 native, Next.js 16.2, TypeScript strict. Real code, carefully built.

Originally published on Craftly.

Check out our premium templates:

Built with Next.js 16, TypeScript, and Tailwind CSS v4.

Next.js 16.2 Turbopack: 400% Faster next dev — What It Actually Feels Like

Craftly-dev — Sat, 18 Apr 2026 12:16:58 +0000

Next.js 16.2 shipped last month with one headline claim: next dev\ is now 400% faster. The official release notes promise 10x HMR on large projects. Turbopack replaces Webpack as the default bundler.

I've been running it on five production-grade template repos for two weeks. Here's what that actually feels like in practice.

The Boring Answer: Yes, It's Fast

Here are the numbers I saw across the Craftly template repos (Next.js 16.2.2, MacBook Air M2):

Repo	15.x `next dev\` cold	16.2 `next dev\` cold	Speedup
SaaSify (8 sections, ~40 components)	6.8s	1.4s	4.9x
Dashboard (sidebar, charts, tables)	9.2s	1.9s	4.8x
Blog (tag filter, 6 posts, typography)	5.1s	1.3s	3.9x

The 400% claim isn't marketing. If anything, it undersells the subjective experience.

Where You Feel It Most

1. Cold start on large projects

Before: you npm run dev\, go make coffee, come back.
Now: it's ready before your terminal prompt settles.

On a fresh clone of a monorepo, the difference is the gap between "I'll grab a drink" and "oh, it's already running."

2. HMR on deeply nested components

Editing a prop in a component 6 folders deep used to produce a visible lag — 200-500ms before the browser reflected the change. On 16.2, it's effectively instant. You stop noticing HMR as a step.

3. Type-checking doesn't block you

Turbopack runs type-checking async. If your types are wrong, you still get the error, but your page doesn't hang waiting for the compiler.

The Catches (there are always catches)

Webpack plugins may not work

If you had a custom webpack config — analyzers, special loaders, module federation — check whether the Turbopack equivalent exists. Most common ones (bundle-analyzer, mdx) are covered. Exotic setups may need migration.

`next.config.ts\` assumptions

Config that worked on Webpack may need tweaking. The clearest symptom: missing files in production build that were fine in dev. Always do a full next build\ before deploying.

HMR for Server Components got better, but not perfect

16.2 adds "Server Fast Refresh" — hot reload for server components. It works for most edits. Complex changes (moving between RSC and Client, changing layouts) still sometimes require a full page reload.

Should You Upgrade?

If you're on 15.x → yes, today. The upgrade is incremental, and the DX improvement alone justifies it. Budget 30 minutes for a small app, an afternoon for a larger one.

If you're on 14.x or earlier → upgrade staged. Go 14 → 15.0 → 15.x latest → 16.2. Don't jump directly.

If you're on 13.x with pages/\ → different question. You're migrating App Router and Turbopack at once. Budget more than a weekend.

What This Means for Templates

I ship Next.js templates for a living, and the jump from 15.x to 16.2 changes the baseline.

A template that ships with 15.x gets outdated the moment a buyer runs npm install\ in three months. A template that ships 16.2 with Turbopack default gives buyers the speed boost without them knowing they wanted it.

This is also why most templates on Gumroad still show pages/\ in their structure. They were built for 13/14, never updated. Buyers get code that technically works but feels slow the moment they start editing.

All Craftly templates ship 16.2 with Turbopack default out of the box. No config migration needed — it's already done.

The Part Nobody Talks About

400% faster dev server means you're willing to try more things.

You don't batch edits because HMR is slow. You don't console.log\ 10 things to avoid a full reload. You just... edit, look, edit, look. The feedback loop tightens, and the quality of your code improves because you iterate more.

The actual unlock isn't the benchmark number. It's the change in how you work.

If you're shipping something this weekend, upgrade to 16.2 first. You'll save more than you spend.

And if you want a Next.js 16.2 + Tailwind v4 + TypeScript template to start from, Craftly has 5 of them from $19 to $49, or all-access bundle at $99.

Originally published on Craftly.

Check out our premium templates:

Built with Next.js 16, TypeScript, and Tailwind CSS v4.

SaaS Pricing Page Best Practices: Design That Converts

Craftly-dev — Sat, 18 Apr 2026 11:27:56 +0000

Your Pricing Page Is Your Most Important Page

For most SaaS products, the pricing page is the highest-intent page on your site. Visitors who reach it are seriously considering buying. A well-designed pricing page can double your conversion rate.

The Three-Tier Rule

Three tiers work best for most SaaS products. Fewer feels limiting, more feels overwhelming.

Starter / Free Tier

Your free tier serves two purposes: it lowers the barrier to entry, and it creates an upgrade path. Keep it useful but limited enough that growing users will naturally outgrow it.

Pro / Growth Tier

This is your money-maker. Design everything on the page to guide users toward this plan. Use visual emphasis, a "Most Popular" badge, and position it in the center.

Enterprise Tier

The enterprise tier serves a dual purpose: it captures large customers, and it makes your Pro tier look affordable by comparison. This is called price anchoring.

Annual Billing Toggle

Always offer annual billing with a visible discount. The industry standard is 15-20% savings. Show the monthly equivalent price so users can easily compare.

Display the annual savings prominently — "Save $60/year" is more compelling than "Save 17%."

Feature Comparison Table

A comparison table removes guesswork. Users can see exactly what they get at each tier without reading paragraphs of text.

Best practices for comparison tables:

List features in order of importance
Use checkmarks and X marks for clarity
Bold the differentiating features
Keep it under 15 rows to avoid overwhelming users

Social Proof

Place testimonials near your pricing cards. Quotes from customers who specifically mention value or ROI are most effective.

Star ratings, customer count badges, and logo clouds all increase trust at the decision point.

FAQ Section

Address the top objections that prevent conversion:

"Can I cancel anytime?" — reduces commitment anxiety
"Is there a free trial?" — lowers perceived risk
"What happens when I exceed limits?" — removes uncertainty
"Do you offer refunds?" — builds trust

Money-Back Guarantee

A 30-day guarantee removes the last barrier to purchase. The small number of refund requests is far outweighed by the increased conversion rate.

Mobile Optimization

Over 40% of SaaS pricing page visits happen on mobile. Your pricing cards must stack cleanly, and the comparison table needs horizontal scrolling or an accordion layout.

Common Mistakes

Too many tiers — stick to three
No visual hierarchy — make the recommended plan obvious
Hidden pricing — "Contact us for pricing" kills conversions for SMB products
No annual option — you're leaving revenue on the table
Missing FAQ — unaddressed objections kill deals

Test Everything

A/B test your pricing page regularly. Small changes to price points, tier names, feature ordering, and CTA copy can have outsized effects on conversion.

Build your pricing page with Craftly's pricing template — conversion-optimized, responsive, and ready to deploy.

Originally published on Craftly.

Check out our premium templates:

Built with Next.js 16, TypeScript, and Tailwind CSS v4.

SEO for Developer Blogs: A Practical Guide for 2026

Craftly-dev — Sat, 18 Apr 2026 01:03:09 +0000

Why SEO Matters for Developer Blogs

You can write the best technical content on the internet, but if nobody finds it, it doesn't matter. SEO is how you get organic traffic — readers who find you through Google without paid ads.

For developer blogs, SEO is especially powerful because technical queries have high intent. Someone searching "how to deploy Next.js to Vercel" wants a specific answer, and if your blog provides it, you earn a loyal reader.

Keyword Research for Developers

Think in Problems, Not Technologies

Bad keyword targets: "React hooks", "TypeScript generics"

Good keyword targets: "how to fetch data in React", "TypeScript generic component example"

People search for solutions to problems, not technology names. Frame your content around the questions developers ask.

Use Long-Tail Keywords

Long-tail keywords are longer, more specific phrases with less competition and higher conversion rates.

Examples:

"Next.js 16 app router tutorial" beats "Next.js tutorial"
"Tailwind CSS v4 dark mode setup" beats "Tailwind dark mode"

Tools That Help

Google Search Console shows what queries already bring traffic. Google Trends reveals seasonal patterns. AnswerThePublic generates question-based keywords.

On-Page SEO Essentials

Title Tags

Include your primary keyword and keep it under 60 characters. Your title tag is the most important on-page element.

Meta Descriptions

Write a compelling description under 155 characters. Include the keyword naturally and give a reason to click.

Heading Structure

Use one H1 per page. Use H2s for main sections and H3s for subsections. Search engines use headings to understand content hierarchy.

Internal Linking

Link between your own posts. This helps search engines discover content and keeps readers on your site longer.

Technical SEO for Next.js

Static Generation

Use static generation for blog posts. Pre-rendered pages load faster and are easier for search engines to crawl.

Metadata API

Next.js provides a Metadata API for setting title tags and meta descriptions per page using generateMetadata for dynamic routes.

Core Web Vitals

Aim for LCP under 2.5 seconds, CLS under 0.1, and INP under 200ms. Static generation and optimized fonts get you most of the way there.

Content Strategy

Publish one quality post per week. Update old content with current information. Write for humans first — readability beats keyword density.

Measuring Success

Track organic traffic, keyword rankings, click-through rate, and time on page. SEO is a long game — expect 3-6 months before seeing significant results.

Start optimizing your developer blog today. Check out Craftly's blog template for an SEO-optimized foundation built with Next.js 16.

Originally published on Craftly.

Check out our premium templates:

Built with Next.js 16, TypeScript, and Tailwind CSS v4.

How to Build a Landing Page Fast with Tailwind CSS v4

Craftly-dev — Sat, 18 Apr 2026 01:02:55 +0000

Tailwind CSS v4: A New Era

Tailwind CSS v4 is a ground-up rewrite that changes how you build websites. Gone is the JavaScript config file. Everything is CSS-first now, which means faster builds, simpler setup, and a more intuitive workflow.

If you're building a landing page in 2026, Tailwind v4 is the best tool for the job. Here's why — and how to do it.

What Changed in v4

CSS-First Configuration

The biggest change: no more tailwind.config.ts\. Instead, you define your design tokens directly in CSS using @theme\:

\`css
@import "tailwindcss";

@theme inline {
--color-primary: #6366f1;
--color-secondary: #ec4899;
--font-sans: "Inter", sans-serif;
}
`\

This is cleaner, faster to parse, and keeps your styling where it belongs — in CSS.

Better Performance

Tailwind v4 uses a new engine called Oxide. Build times are dramatically faster, especially on large projects. Hot reload is near-instant.

Simplified Dark Mode

Dark mode works naturally with CSS variables. Define your tokens for both modes and toggle with a class:

\css :root { --color-background: #ffffff; --color-foreground: #0f172a; } .dark { --color-background: #0f172a; --color-foreground: #f8fafc; } \\

Anatomy of a Great Landing Page

Every high-converting landing page needs these sections:

1. Hero Section

Your hero is the first thing visitors see. It needs a clear headline, a supporting description, and a strong call-to-action. Add social proof if you have it.

2. Logo Cloud

Show the companies or platforms that trust your product. Even 4-5 logos dramatically increase credibility.

3. Features Grid

Highlight 3-6 key features with icons and short descriptions. Use a responsive grid that works on mobile.

4. Pricing

Be transparent about pricing. Show 2-3 tiers with clear feature comparisons. Highlight the most popular option.

5. Testimonials

Real quotes from real users. Include names, roles, and photos when possible.

6. FAQ

Address common objections before they become deal-breakers. An accordion component works well here.

7. Final CTA

End with a clear call-to-action. Repeat the value proposition and make it easy to convert.

Speed vs. Quality

The tension in web development is always speed vs. quality. Templates solve this by giving you both.

A well-built template gives you production-ready code that you can customize to match your brand. Instead of spending two weeks building a landing page from scratch, you spend two hours customizing a template.

The Tailwind v4 Advantage

Why Tailwind v4 specifically? Three reasons:

Utility-first means no context switching between HTML and CSS files
Design tokens ensure visual consistency across every component
Dark mode is built-in, not bolted on

When to Use a Template

Build from scratch when your design is highly custom or your brand requires a unique visual identity that no template can match.

Use a template when you need to launch fast, want proven design patterns, or don't have a dedicated designer on your team.

Getting Started

The fastest path from idea to live landing page:

Pick a template built with Tailwind CSS v4
Customize the content and colors
Deploy to Vercel or Netlify
Start driving traffic

Your landing page doesn't need to be perfect on day one. It needs to exist. Ship it, measure it, improve it.

Explore Craftly's landing page templates — built with Next.js 16 and Tailwind CSS v4, ready to deploy in minutes.

Originally published on Craftly.

Check out our premium templates:

Built with Next.js 16, TypeScript, and Tailwind CSS v4.

Free vs Premium Notion Templates: Which Should You Choose?

Craftly-dev — Fri, 17 Apr 2026 08:45:40 +0000

The Notion Template Boom

Notion has become the go-to workspace for millions of people. And with that growth came an explosion of templates — both free and paid.

But here's the question everyone asks: why pay for a Notion template when there are thousands of free ones?

When Free Templates Work

Free templates are great when you need something simple and generic. Here's when they make sense:

Personal Use

If you just want a basic task list or reading log for yourself, a free template will do the job. No need to overthink it.

Trying Notion Out

New to Notion? Start with free templates to learn how databases, relations, and views work before investing in premium options.

Simple Use Cases

Single-database templates like a basic habit tracker or bookmark manager don't need premium features.

When Premium Templates Are Worth It

Premium templates earn their price in specific scenarios:

Multi-Database Systems

Templates that connect multiple databases with relations, rollups, and formulas save you hours of setup. A project tracker with linked tasks, notes, and timelines is complex to build from scratch.

Professional Quality

Premium templates typically offer better visual design, more thoughtful UX, and complete documentation. This matters when you're using it daily.

Time Savings

Your time has value. If a $10 template saves you 3 hours of building and tweaking, that's a great return on investment.

Updates and Support

Many premium template creators offer updates and support. Free templates are usually "as-is" with no maintenance.

What to Look For in Any Template

Whether free or paid, evaluate templates on these criteria:

Structure

Is the database structure logical? Are properties well-named? Can you understand the system at a glance?

Documentation

Does it include instructions? A template without a guide is like furniture without assembly instructions.

Customizability

Can you easily adapt it to your workflow? Avoid templates that are too rigid or too opinionated.

Sample Data

Good templates include example data so you can see how everything connects before you start adding your own.

Our Recommendation

Start free, go premium when you hit limits. Use free templates for simple, personal use cases. Invest in premium templates for professional workflows, complex systems, or anything you'll use daily.

The best template is the one you actually use consistently.

Browse our Notion template collection for professionally designed templates that save you hours of setup time.

Originally published on Craftly.

Check out our premium templates:

Built with Next.js 16, TypeScript, and Tailwind CSS v4.

Best Next.js Templates for Startups in 2026

Craftly-dev — Fri, 17 Apr 2026 08:42:34 +0000

Why Next.js for Startups?

Next.js has become the go-to framework for startups that need to ship fast without sacrificing quality. With features like App Router, server components, and built-in optimization, it's the perfect foundation for any web application.

But building from scratch still takes time. That's where templates come in.

What to Look For in a Template

When choosing a Next.js template for your startup, consider these factors:

1. Modern Tech Stack

Look for templates built with the latest versions of Next.js, TypeScript, and Tailwind CSS. Outdated templates create technical debt from day one.

2. Responsive Design

Your template should look great on every device. Mobile traffic accounts for over 60% of web visits — don't ignore it.

3. Dark Mode Support

Dark mode isn't a nice-to-have anymore. Most developer and startup audiences prefer it. Make sure your template supports both light and dark themes.

4. Clean, Customizable Code

The whole point of a template is to save time. If the code is messy or tightly coupled, you'll spend more time fighting it than building on top of it.

5. Performance

Aim for Lighthouse scores above 90. Templates with heavy JavaScript bundles or unoptimized images will hurt your SEO and user experience.

Top Picks for 2026

SaaSify — SaaS Landing Page ($49)

A complete SaaS landing page with 8 sections, dark mode, and Framer Motion animations. Built with Next.js 16 and Tailwind CSS v4.

Best for: SaaS startups that need a professional landing page fast.

Includes: Hero, Logo Cloud, Features, Pricing, Testimonials, FAQ, CTA, Footer.

Developer Portfolio ($39)

A clean, data-driven portfolio template. Edit one file to customize everything — projects, experience, skills, and contact info.

Best for: Freelance developers and designers building their personal brand.

Getting Started

Purchase and download the template
Run npm install\ and npm run dev\
Edit the content files to match your brand
Deploy to Vercel with one click

Conclusion

The right template can save you weeks of development time. Focus on what matters — building your product — and let the template handle the presentation layer.

Ready to ship faster? Check out Craftly's template collection for production-ready Next.js templates.

Originally published on Craftly.

Check out our premium templates:

Built with Next.js 16, TypeScript, and Tailwind CSS v4.

DEV Community: Craftly-dev

Custom Domains for Next.js: The Cloudflare + Vercel Setup That Works in 2026

The Stack

Step 1: Buy the Domain on Cloudflare

Step 2: Add the Domain to Vercel

Step 3: Get DNS Records

Step 4: Add to Cloudflare DNS

Step 5: Wait for Verification

The Apex CNAME Gotcha

301 Redirects from Old URL

How to Build an Admin Dashboard with Next.js in 2026

Why Dashboards Matter for SaaS

Key Components of a Modern Dashboard

Stat Cards

Charts

Choosing a Charting Library: Recharts vs Chart.js vs Tremor

Data Tables

Sidebar

Data Architecture: The Single Data File Pattern

Dark Mode Implementation

Responsive Sidebar Patterns

Getting Started Fast

Next.js 16 App Router: The Complete Guide for 2026

What Is the App Router?

Server Components vs. Client Components

Server Components

Client Components

When to Use "use client"

The params Promise API (Breaking Change in Next.js 15+)

Before (Next.js 14)

After (Next.js 15+)

generateStaticParams

generateMetadata

File Conventions: layout, loading, error

layout.tsx

loading.tsx

error.tsx

Performance Tips

Putting It All Together

I Used Claude Design on Day 2. Here's What Web Designers Should Know.

What is Claude Design

The Test

What It Generated

The Good Part: It Really Did Get Easier

The workflow is conversational, not point-and-click

When you ask for code, you get code

A beginner can ship something decent with this alone

The Honest Part: "Decent" and "Great" Are Different Tiers

Where the baseline falls short

The knowledge that still pays off

What This Means for Different People

If you're a beginner or non-designer

If you're a working designer

If you're a design system maintainer

What To Actually Do

The Honest Bottom Line

Next.js 16.2 Turbopack: 400% Faster next dev — What It Actually Feels Like

The Boring Answer: Yes, It's Fast

Where You Feel It Most

1. Cold start on large projects

2. HMR on deeply nested components

3. Type-checking doesn't block you

The Catches (there are always catches)

Webpack plugins may not work

next.config.ts\ assumptions

HMR for Server Components got better, but not perfect

Should You Upgrade?

What This Means for Templates

The Part Nobody Talks About

SaaS Pricing Page Best Practices: Design That Converts

Your Pricing Page Is Your Most Important Page

The Three-Tier Rule

Starter / Free Tier

Pro / Growth Tier

Enterprise Tier

Annual Billing Toggle

Feature Comparison Table

Social Proof

FAQ Section

Money-Back Guarantee

`next.config.ts\` assumptions