Next.jsReact作品集SaaS企业官网

landing-templates — Next.js 作品集模板

作者 Crypt0xDev

一个基于 Next.js 的落地页模板展示站，内置 8 个按行业分类的模板，支持筛选、详情页与静态生成。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

内置 8 个落地页模板条目，按 SaaS、初创、机构、餐厅、安全五类行业归类

02

模板列表页提供分类筛选栏，卡片带悬停预览遮罩

03

模板详情路由使用 generateStaticParams 在构建时静态生成

04

每页通过 generateMetadata 输出独立元数据，根布局配置 Open Graph

05

使用 Tailwind CSS 构建响应式网格，支持深色模式与渐变样式

06

模板数据以 TypeScript 静态文件维护，含类型定义与查询辅助函数

模板详细介绍

Landing Templates 是一个用 Next.js App Router 构建的模板展示与预览平台，仓库中自带 8 个落地页模板，覆盖 SaaS、初创公司、设计机构、餐厅和网络安全五类行业。站点首页展示模板卡片网格，模板列表页提供按分类筛选的 FilterBar，每个模板有独立的详情路由（/templates/[slug]），并通过 generateStaticParams 在构建时生成静态页面。

数据层是静态的：模板信息集中存放在 data/templates.ts，由 lib/getTemplates.ts 提供查询辅助函数，types/template.ts 定义 TypeScript 接口，因此新增或修改模板需要直接编辑源码，不涉及数据库或后台管理界面。样式使用 Tailwind CSS，包含渐变与深色模式；字体为 Geist，占位图来自 placehold.co（启用 SVG）。页面元数据通过 generateMetadata 逐页生成，根布局配置了 Open Graph。

需要注意的是，这是一个展示型项目而非可直接上线的成品站点：仓库中的 8 个模板是演示条目，模板卡片使用占位图，并非完整可下载的独立模板包。项目为 MIT 许可，但演示图片、字体、图标等第三方素材需单独核对授权。

Next.jsReact作品集SaaS企业官网

适合你的项目吗？

适用场景

  • 作为模板目录站的原型，演示分类筛选、卡片网格与详情页的完整浏览流程
  • 学习 Next.js App Router 下静态生成、动态路由与逐页元数据的组织方式
  • 以 data/templates.ts 为数据源，替换成自己的模板条目后搭建同类展示站
  • 参考其组件划分（Navbar、Footer、TemplateCard、TemplateGrid、FilterBar）搭建作品集或产品目录页面

适合人群

  • 想研究 Next.js App Router 静态生成与动态路由配合方式的开发者
  • 需要搭建模板或作品集目录站、并接受以源码维护数据的个人或小团队
  • 希望参考 Tailwind CSS 响应式网格与深色模式实现的 React 开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    克隆仓库后执行 npm install，再用 npm run dev 在 localhost:3000 启动开发服务器

  2. 2

    可用脚本包括 npm run dev、build、start 和 lint（ESLint）

  3. 3

    模板内容需直接编辑 data/templates.ts，项目未提供数据库或后台管理界面

  4. 4

    仓库中的模板为演示条目，卡片使用 placehold.co 占位图，并非可直接下载的独立模板包

  5. 5

    代码为 MIT 许可，但演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 模板卡片图片使用 placehold.co 外部占位图服务，需联网加载；若离线部署或该服务不可用，预览图将无法显示，需自行替换为本地图片。
  • 字体使用 Vercel 提供的 Geist，属第三方素材，其授权需单独核对，MIT 代码许可不覆盖该字体。
  • 代码为 MIT 许可，但仓库中的演示图片、字体、图标等第三方素材不在该许可范围内，商用前须逐一确认各自授权。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

**Imágenes:** [placehold.co](https://placehold.co) con SVG habilitado

README 原文

**Fuentes:** [Geist](https://vercel.com/font) (Vercel)

README 原文

Distribuido bajo la licencia **MIT**. Ver [LICENSE](LICENSE) para más detalles.

README 原文
https://github.com/Crypt0xDev/landing-templates/blob/main/LICENSEhttps://github.com/Crypt0xDev/landing-templates/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 88 / 100
技术栈
Next.js · React
网站类型
作品集 · SaaS · 企业官网
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-04-13
截图检查日期
2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 3cf2d1cc05e8c9dedd61fb22b1c2c1017003568b85da2c96094ddebd7315c784

2026-10-02T14:32:18.189Z

来源文件 / 仓库
<div align="center">

# Landing Templates

**Marketplace de plantillas de landing pages listas para usar**

[![Next.js](https://img.shields.io/badge/Next.js-16.2-black?style=flat-square&logo=nextdotjs)](https://nextjs.org)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?style=flat-square&logo=typescript)](https://typescriptlang.org)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-v4-38bdf8?style=flat-square&logo=tailwindcss)](https://tailwindcss.com)
[![License: MIT](https://img.shields.io/badge/License-MIT-22c55e?style=flat-square)](LICENSE)

[Ver demo](#) · [Explorar plantillas](#) · [Reportar bug](https://github.com/Crypt0xDev/landing-templates/issues)

</div>

---

## Descripción

**Landing Templates** es una plataforma web para descubrir y previsualizar plantillas de landing pages categorizadas por industria. Construida con Next.js 16 App Router, optimizada para SEO y generación estática.

---

## Características

| Característica | Descripción |
|---|---|
| 🗂️ **Catálogo filtrable** | Filtra por categoría: SaaS, Startup, Agencia, Restaurante, Seguridad |
| ⚡ **Generación estática** | `generateStaticParams` para rutas de detalle ultra rápidas |
| 🎨 **Diseño moderno** | UI minimalista con Tailwind v4, gradientes y modo oscuro |
| 🔍 **SEO optimizado** | `generateMetadata` por página y layout con Open Graph |
| 📱 **Totalmente responsive** | Grid adaptable desde mobile hasta widescreen |
| 🖼️ **Preview con overlay** | Hover interactivo sobre cada tarjeta de plantilla |

---

## Stack tecnológico

- **Framework:** [Next.js 16.2](https://nextjs.org) con App Router y React Compiler
- **Lenguaje:** [TypeScript 5](https://typescriptlang.org) en modo estricto
- **Estilos:** [Tailwind CSS v4](https://tailwindcss.com)
- **Fuentes:** [Geist](https://vercel.com/font) (Vercel)
- **Imágenes:** [placehold.co](https://placehold.co) con SVG habilitado

---

## Estructura del proyecto

```
landing-templates/
├── app/
│   ├── page.tsx                    # Página de inicio
│   ├── layout.tsx                  # Layout raíz (Navbar + Footer)
│   ├── globals.css                 # Estilos globales
│   └── templates/
│       ├── page.tsx                # Listado con filtros
│       ├── loading.tsx             # Esqueleto de carga
│       └── [slug]/
│           ├── page.tsx            # Detalle de plantilla
│           └── not-found.tsx       # 404 personalizado
├── components/
│   ├── Navbar.tsx                  # Barra de navegación
│   ├── Footer.tsx                  # Pie de página
│   ├── TemplateCard.tsx            # Tarjeta de plantilla
│   ├── TemplateGrid.tsx            # Grid de tarjetas
│   └── FilterBar.tsx               # Filtro por categoría
├── data/
│   └── templates.ts                # Base de datos estática (8 plantillas)
├── lib/
│   └── getTemplates.ts             # Helpers de consulta
└── types/
    └── template.ts                 # Interfaces TypeScript
```

---

## Instalación

```bash
# Clonar repositorio
git clone https://github.com/Crypt0xDev/landing-templates.git
cd landing-templates

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev
```

Abre [http://localhost:3000](http://localhost:3000) en tu navegador.

---

## Scripts disponibles

| Comando | Descripción |
|---|---|
| `npm run dev` | Servidor de desarrollo en `localhost:3000` |
| `npm run build` | Compilación para producción |
| `npm run start` | Servidor de producción |
| `npm run lint` | Análisis de código con ESLint |

---

## Plantillas incluidas

| Nombre | Categoría | Descripción |
|---|---|---|
| Nexus AI | SaaS | Dashboard inteligente con IA |
| Velocity SaaS | SaaS | Plataforma de analíticas |
| Launchpad | Startup | MVP para startups tech |
| Founder Hub | Startup | Red de fundadores |
| Studio Pro | Agencia | Portafolio de diseño |
| Creative Agency | Agencia | Agencia creativa urbana |
| Bistro Belle | Restaurante | Restaurante gourmet |
| ShieldOps | Seguridad | Ciberseguridad empresarial |

---

## Licencia

Distribuido bajo la licencia **MIT**. Ver [LICENSE](LICENSE) para más detalles.

---

<div align="center">
<sub>Hecho con Next.js · 2026</sub>
</div>
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

Next.js SaaS Starter

Next.js SaaS Starter

Next.js SaaS Starter 是 Next.js 官方维护的 SaaS 起点模板，定位介于学习资源和可直接部署的脚手架之间。

Next.js · SaaS

SaaS-Boilerplate

SaaS-Boilerplate

🚀🎉📚 SaaS Boilerplate built with Next.js + Tailwind CSS + Shadcn UI + TypeScript. ⚡️ Full-stack React applic…

Next.js · SaaS

create-t3-turbo

create-t3-turbo

create-t3-turbo 是一个面向全栈 TypeScript 的 monorepo 起点，由 T3 OSS 维护，在 Vercel 模板目录中收录。

Next.js · 启动器

saas-starter-kit

saas-starter-kit

🔥 Enterprise SaaS Starter Kit - Kickstart your enterprise app development with the Next.js SaaS boilerplate �…

Next.js · SaaS

saasfly

saasfly

Your Next SaaS Template or Boilerplate ! A magic trip start with `bun create saasfly` . The more stars, the mo…

Next.js · SaaS

react-resume-template

react-resume-template

A personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css

Next.js · 作品集