Best Next.js Personal Website & Portfolio Templates 2026
Best Next.js Personal Website & Portfolio Templates in 2026
Your personal website is where employers, clients and collaborators go to figure out who you are and what you've built. And yet most developer sites look the same because they start from the same few templates.
We compared 11 Next.js personal website and portfolio templates, 9 of them free, and checked every repo's licence, last update and Next.js version in September 2026. Two popular picks turned out not to be Next.js at all, and one of the prettiest free options is licensed for personal use only (fine for a personal site, but worth knowing).
Building more than a portfolio? Get every kit for $749
If you're also shipping a SaaS, dashboard or product, All UI Kits unlocks every Next.js kit on thefrontkit: SaaS Starter, CRM Dashboard, HR Dashboard, Kanban PM, E-commerce, AI UX, Blog CMS, Inventory Management, and 10 more. One-time payment, no subscription.
Quick Picks
| Need | Pick | Price |
|---|---|---|
| Minimal official starter | Vercel Portfolio Starter Kit | Free |
| Polished shadcn portfolio | Magic UI Portfolio | Free |
| Blog-first personal site | Tailwind Nextjs Starter Blog | Free |
| Write in Notion, publish a site | Next.js Notion Starter Kit | Free |
| Paid design, one-time price | Cruip DevFolio | $49 |
What Matters in a Personal Website Template
First impression in 3 seconds. Visitors decide whether to stay or leave almost immediately. Your template needs a strong hero section that communicates who you are without requiring a scroll.
Project showcase. If you're a developer or designer, your projects need to look good. Card grids with screenshots, descriptions, and links. Some templates nail this. Others give you a plain bulleted list.
Blog support. A personal website without a blog is a missed opportunity. Writing about your work drives search traffic and establishes credibility. Your template should support markdown or MDX with minimal setup.
Performance. Personal websites should load in under 2 seconds. You're competing for attention against people with fast sites. A template bloated with heavy animations or unoptimized images will hurt you.
Responsive design. Recruiters check your site on their phones between meetings. If your portfolio grid breaks on mobile or your navigation is unusable on a small screen, that's a bad look for someone claiming to be a frontend developer.
11 Best Next.js Personal Website Templates
1. Vercel Portfolio Starter Kit
Best minimal official starting point.
Vercel's Portfolio Starter Kit is a clean personal site with an MDX blog, SEO, RSS and dynamic Open Graph images, on Next.js 16 and the App Router. It's deliberately plain, which makes it a good base if you want to design your own look. (It pins an early Tailwind v4 alpha, so update that first.)
- Blog: MDX
- Stack: Next.js 16, Tailwind v4 (alpha)
- Licence: MIT
- Price: Free
2. Magic UI Portfolio
Best free portfolio with polish.
Magic UI's portfolio template (about 1.5k stars) is a one-page personal site with smooth animations, a project grid and an MDX blog, built with shadcn/ui on Next.js 16 and Tailwind v4.
- Blog: MDX
- Stack: Next.js 16, Tailwind v4, shadcn/ui
- Licence: MIT
- Price: Free
3. chanhdai.com
Best open-source personal site to learn from.
chanhdai.com (about 2.3k stars) is a real developer's personal site, open-sourced and actively maintained on Next.js 16, React 19, Tailwind v4 and shadcn/ui, with its own component registry. It's more of a reference than a template, but it's among the most modern stacks on this list.
- Stack: Next.js 16, Tailwind v4, shadcn/ui
- Licence: MIT
- Price: Free
4. Lee Robinson's next-mdx-blog
Best tiny MDX site.
The old leerob.io repo now redirects to next-mdx-blog (about 7.6k stars): a small, fast MDX personal blog on Next.js 16 and Tailwind v4. It has no licence file, so ask the author before you reuse it commercially.
- Blog: MDX
- Stack: Next.js 16, Tailwind v4
- Licence: None stated
- Price: Free
5. nelsonlai.dev
Best feature-rich open-source personal site.
nelsonlai.dev (about 800 stars) is another real personal site, open-sourced as a monorepo on Next.js 16 and Tailwind v4, with a blog and more features than most templates. Expect to strip things out.
- Stack: Next.js 16, Tailwind v4
- Licence: MIT
- Price: Free
6. Tailwind Nextjs Starter Blog
Best if writing is the main event.
Tailwind Nextjs Starter Blog (about 10.6k stars) is the most feature-complete free blog template: MDX, tags, search, comments, analytics, newsletter, RSS and a sitemap, on Next.js 15 and Tailwind v4. It works well as a personal site if your writing matters more than a flashy portfolio.
- Blog: MDX (full-featured)
- Stack: Next.js 15, Tailwind v4
- Licence: MIT
- Price: Free
7. Next.js Notion Starter Kit
Best if you want to write in Notion.
The Next.js Notion Starter Kit (about 7k stars) turns a public Notion workspace into a fast website, using the react-notion-x renderer. It's on Next.js 16 and the App Router, and updates when you edit Notion. Design control is more limited than with code-based templates.
- Content: Notion
- Stack: Next.js 16
- Licence: MIT
- Price: Free
8. Nextra blog theme
Best if you also want docs.
Nextra 4 still ships nextra-theme-blog, an MDX blog theme on Next.js. It's minimal and pairs well with Nextra's docs theme if your personal site also documents your projects.
- Blog: MDX
- Licence: MIT
- Price: Free
9. Once UI Magic Portfolio
Best-looking free option, for personal use.
Magic Portfolio (about 1.4k stars) is a striking portfolio on Next.js 16 using Once UI's own design system rather than Tailwind. The licence is CC BY-NC 4.0, which means non-commercial use only. That's fine for most personal sites, but not if you're building sites for clients.
- Stack: Next.js 16, Once UI
- Licence: CC BY-NC 4.0
- Price: Free for non-commercial use
10. Cruip DevFolio and DevSpace
Best paid designs for a one-time price.
Cruip sells DevFolio (portfolio) and DevSpace (personal blog) for $49 each, in HTML and Next.js versions. Its Classic Bundle ($79 one-time) includes both plus 18 more templates.
- Price: $49 each, or $79 for the bundle
11. Aceternity UI DevPro Portfolio
Best for a bold, animated portfolio.
Aceternity UI's paid plans include a DevPro portfolio template alongside its animated component library: $169 a year or $199 one-time for lifetime access when we checked.
- Price: $169/year or $199 lifetime
Not Next.js: chronark.com is a well-known open-source personal site, but it's built with Astro now. Astro Starlight is also Astro. Both are good, just not for a Next.js list.
Comparison Table
| Template | Price | Licence | Content | Next.js | Tailwind |
|---|---|---|---|---|---|
| Vercel Portfolio Starter | Free | MIT | MDX | 16 | v4 (alpha) |
| Magic UI Portfolio | Free | MIT | MDX | 16 | v4 |
| chanhdai.com | Free | MIT | MDX | 16 | v4 |
| next-mdx-blog | Free | None stated | MDX | 16 | v4 |
| nelsonlai.dev | Free | MIT | MDX | 16 | v4 |
| Tailwind Nextjs Starter Blog | Free | MIT | MDX | 15 | v4 |
| Notion Starter Kit | Free | MIT | Notion | 16 | No |
| Nextra blog theme | Free | MIT | MDX | Yes | n/a |
| Once UI Magic Portfolio | Free (non-commercial) | CC BY-NC 4.0 | MDX | 16 | No |
| Cruip DevFolio / DevSpace | $49 each | Commercial | Varies | Yes | Yes |
| Aceternity DevPro | $169/yr or $199 | Commercial | Varies | Yes | Yes |
Want a personal blog with a full admin panel (editor, media library, comments) instead of MDX files? Our Blog CMS Kit is overkill for most personal sites, but it's there if you need it.
Tips for Making Your Personal Website Stand Out
Most personal websites fail for the same reasons. Here's how to avoid the common traps:
Write a real bio, not a buzzword salad. "Passionate full-stack developer leveraging cutting-edge technologies" tells visitors nothing. "I build payment systems at Stripe and write about database performance" tells them exactly who you are. Be specific about what you do and what you're interested in.
Show 3-5 strong projects, not 20 weak ones. Quality over quantity. Each project should have a screenshot, a sentence about what it does, what your role was, and a link. If you can't explain why a project matters, leave it off.
Write blog posts. Even one post per month builds your search presence over time. Technical posts about problems you solved attract visitors who are dealing with the same issues. Our guide on frontend performance is an example of the kind of content that performs well.
Test on mobile first. Open your site on your phone before you share it anywhere. Check that text is readable, buttons are tappable, and the layout doesn't break.
Add proper meta tags. When someone shares your site on Slack or Twitter, the preview should look good. Set up Open Graph images and descriptions for your homepage and blog posts.
FAQ
What is the best framework for a personal website in 2026?
Next.js is the most popular choice for developers because it combines React's component model with built-in performance features like static generation and image optimization. Astro is a strong alternative if you prioritize page speed and don't need much client-side interactivity (several well-known developer sites have moved to it).
What is the best free Next.js portfolio template?
For a polished look, Magic UI's portfolio template (MIT, Next.js 16, shadcn/ui). For a minimal official base, Vercel's Portfolio Starter Kit. If writing matters most, the Tailwind Nextjs Starter Blog. Once UI's Magic Portfolio looks great too, but it's licensed for non-commercial use only.
Should I use a template or build my personal website from scratch?
Use a template. Your personal website isn't your product. It's a tool to showcase your work. Spending weeks building a custom blog system from scratch is time you could spend creating things worth showcasing. Start with a template, customize the design, and focus on the content. We wrote about this trade-off in our boilerplate vs building from scratch comparison.
How do I make my Next.js personal website fast?
Use static generation (generateStaticParams) for all pages. Optimize images with the Next.js Image component. Minimize client-side JavaScript. Use a CDN (Vercel's edge network handles this automatically). Lazy-load below-the-fold content. A well-optimized Next.js personal website should score 95+ on Lighthouse.
Do I need a custom domain for my personal website?
Yes. yourname.com looks more professional than yourname.vercel.app. Domains cost $10-15/year. It's one of the cheapest investments you can make in your professional brand.
How often should I update my personal website?
Update your project showcase when you ship something new. Write blog posts at whatever cadence you can sustain (monthly is a good target). Update your bio and headshot at least once a year. The biggest mistake is launching a personal website and then never touching it again.
