Next.jsReactPortfolioBlog

Nextfolio — Next.js Portfolio Template

By 3p5ilon

Nextfolio is a portfolio and blog template built with Next.js, Tailwind CSS, and Vercel, supporting MDX content, light and dark themes, dynamic OG images, and RSS/Atom/JSON feeds.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews

Desktop homepage1 / 3

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

MDX support: write blog posts using JSX components directly in Markdown

Light and dark mode switching for different reading environments

Automatically generates Open Graph share images

Built-in sitemap, robots.txt, and JSON-LD structured data

Automatically outputs RSS, Atom, and JSON feeds

Supports KaTeX math formulas, tweet and YouTube embeds, image captions, and image grids

Template Details

Nextfolio is a Next.js template for personal portfolios and blogs, styled with Tailwind CSS and targeting Vercel deployment. Content is written in MDX, allowing JSX components to be inserted into Markdown; the template includes light and dark mode switching, dynamic Open Graph image generation, sitemap, robots.txt, and JSON-LD structured data, while automatically generating RSS, Atom, and JSON feeds.

For content presentation, it provides KaTeX math rendering, tweet and YouTube embeds, image captions, and image grid layouts, making it suitable for personal sites focused on images, text, and short posts.

Configuration is centralized in app/config.ts for site metadata and social links, app/sitemap.ts for routes, and the /content directory for blog posts. Dependency management uses pnpm, and the development server runs on localhost:3000 by default. The template is MIT licensed and can be used, modified, commercialized, and distributed for free, but third-party assets such as demo images, fonts, and icons require separate license verification, and external services like domains and hosting may incur costs.

Next.jsPortfolioBlog

Is it right for your project?

Use Cases

Build a personal portfolio site to showcase projects and image-text content
Create a personal blog written in MDX and output feeds
Sites for technical articles or study notes that require math formula rendering
Personal homepages that present multimedia articles with image grids and embedded content

Suitable For

Front-end developers familiar with Next.js and Tailwind CSS
Individuals who need a combined portfolio and blog with content maintained in MDX
Users planning to deploy to Vercel and accept its analytics services
Writers who need RSS/Atom/JSON feeds and basic SEO configuration

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
Use pnpm for dependency management; pnpm must be installed first
2
Initialize with pnpm create next-app --example repository-url project-name, then run pnpm dev to start the local server
3
Update site metadata, social links, SEO, feeds, and Open Graph settings in app/config.ts
4
Update routes in app/sitemap.ts and maintain blog posts in the /content directory
5
Third-party assets such as demo images, fonts, and icons must be checked against their respective licenses; external services like domains and hosting may incur additional charges

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope applies to that version's code and does not imply that external services or third-party assets are free.

Must comply with when using

The code of this version may be used, modified, commercialized, and distributed for free.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

The template includes Vercel Web Analytics and Speed Insights performance analytics; using these analytics capabilities requires deployment on the Vercel platform and reliance on its external services, and may be subject to Vercel's terms of service and usage/cost limits.
The project targets Vercel as the deployment platform, and capabilities such as dynamic OG image generation depend on Vercel platform functions; deploying to Vercel requires an account, and hosting and related services may incur costs.
Dependency management requires pnpm; pnpm must be installed on the system before initializing and running the project as documented.
Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur additional charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

Analytics: [Vercel Web Analytics](https://vercel.com/docs/speed-insights) and [Speed Insights](https://vercel.com/docs/speed-insights)
Original README

Deployment: [Vercel](https://vercel.com/)
Original README

Nextfolio uses [pnpm](https://pnpm.io/installation) for dependency management, so ensure it is installed on your system.
Original README

https://github.com/3p5ilon/Nextfolio/blob/main/LICENSE https://github.com/3p5ilon/Nextfolio/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 90 / 100
Technologies: Next.js · React
Website type: Portfolio · Blog

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2025-06-26
Screenshot last checked: 2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 81f001c65eae13ce8b7bce467c0d76dfeee622898aed265b9d04648c562ac9fe

2026-10-02T16:40:45.707Z

Source file / repository

# Nextfolio

A clean, fast, and lightweight portfolio template built with [Next.js](https://nextjs.org/), [Vercel](https://vercel.com/), and [Tailwind CSS](https://tailwindcss.com/).

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2F1msirius%2FNextfolio)

## Technologies Used

- Framework: [Next.js](https://nextjs.org/)
- Styling: [Tailwind CSS](https://tailwindcss.com/)
- Analytics: [Vercel Web Analytics](https://vercel.com/docs/speed-insights) and [Speed Insights](https://vercel.com/docs/speed-insights)
- Deployment: [Vercel](https://vercel.com/)

## Features

- **[MDX](https://mdxjs.com/) Support**: Use Markdown with JSX components for blog posts.
- **Light and Dark Mode Toggle**: Switch between themes for better readability.
- **Dynamic [OG Images](https://vercel.com/docs/functions/og-image-generation)**: Auto-generate Open Graph images for sharing.
- **SEO Optimization**: Enhance search visibility with sitemap, robots.txt, and JSON-LD schema.
- **Dynamic Feed Generation**: Automatic dynamic [RSS](https://nextfolio-template.vercel.app/rss.xml), [Atom](https://nextfolio-template.vercel.app/atom.xml), and [JSON](https://nextfolio-template.vercel.app/feed.json) feeds.
- **[KaTeX](https://katex.org/) Integration**: Render mathematical expressions smoothly.
- **Performance Tracking**: Monitor web performance with [Vercel Web Analytics](https://vercel.com/docs/speed-insights) and [Speed Insights](https://vercel.com/docs/speed-insights).
- **Interactive Embeds**: Easily embed interactive tweets and YouTube videos.
- **Captions**: Add descriptive captions to photos, tweets, and videos.
- **Image Grid**: Easily showcase image galleries or photos.

## Installation

Nextfolio uses [pnpm](https://pnpm.io/installation) for dependency management, so ensure it is installed on your system.

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [pnpm](https://pnpm.io/installation) to bootstrap the example:

```
pnpm create next-app --example https://github.com/1msirius/Nextfolio my-portfolio
```

Start the development server:

```
pnpm dev
```

The server will be running at [http://localhost:3000](http://localhost:3000).

## Configuration

1. Update the site metadata and social links in `app/config.ts` to set up SEO, feeds, social links, and Open Graph settings.
2. Update your routes in `app/sitemap.ts` for SEO optimization.
3. Update your blog posts in the `/content` folder.

For more information about configuration, follow the instructions in the [Getting Started](https://nextfolio-template.vercel.app/blog/getting-started#configuration) post.

## Contributing

Contributions are welcome! To get involved, just push your code to the repo. Whether you're enhancing existing features or adding new ones, your efforts are greatly appreciated!

## Licence

Nextfolio is open-source and released under the MIT License.

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

tailwind-nextjs-starter-blog

A Next.js and Tailwind CSS blog starter template using Contentlayer for Markdown/MDX, with built-in SEO, code highlighting, and tags. It targets personal technical blogs and migration from Jekyll/Hugo to React, and supports one-click Vercel deployment.

Next.js · Blog

react-resume-template

A personal resume website template for software developers, built with Next.js, React, and TypeScript and styled with Tailwind CSS. Site content is driven by a single data file at /src/data/data.tsx, with types in dataDef.ts and images in src/images/.

Next.js · Portfolio

Nextjs-tailwindcss-blog-template

A personal blog template built with Next.js and Tailwind CSS, using Velite to process Markdown content. It includes home, about, contact and article pages, with a demo site and a companion YouTube tutorial.

Next.js · Blog

Next-js-Blog-Boilerplate

A blog starter built on Next.js 12 and Tailwind CSS 3, integrating TypeScript, ESLint, Prettier, and PostCSS.

Next.js · Blog

nextjs-blog-theme

A Next.js 15 and Tailwind CSS 4.x blog starter by Netlify, designed by Bejamas, with MDX support, dark/light theme switching, and environment-variable configuration. It includes a visual setup wizard for deploying to Netlify and manages content via local .mdx files.

Next.js · Blog

blog

A personal blog forked from Timlrx's tailwind-nextjs-starter-blog, built with Next.js, React, and Tailwind CSS. Content is stored as Markdown/MDX under data/, with site, author, navigation, and project data in separate files.

Next.js · Blog