Next.jsReactDirectory site

next-pages-template — Next.js Directory site Template

By heroui-inc

A starter template for HeroUI and Tailwind CSS based on the Next.js Pages Router, including example home and blog pages.

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-01View source

What stands out

A quick read of the recorded project description.

Uses the Next.js pages directory structure rather than the App Router

Pre-configured with the HeroUI component library and Tailwind CSS

Integrates Tailwind Variants, TypeScript, and next-themes

Provides example home and blog pages; the demo site is directly accessible

Supports creating a project directly via the -e flag of create-next-app

MIT licensed; free to use, modify, and distribute

Template Details

This is a template for building Next.js applications that uses the Pages Router (pages directory) rather than the App Router. The repository notes explicitly that since Next.js 15, the official recommendation is to migrate the pages router to the new App Router, so this template is better suited to projects that still need to use the pages directory structure, or as a reference for how to configure HeroUI under pages routing.

The template comes pre-configured with HeroUI and Tailwind CSS, along with Tailwind Variants, TypeScript, and next-themes. These tools in the dependency list correspond to component styling, type checking, and light/dark theme switching respectively; the repository does not describe any additional business functionality. The demo site includes a home page and a blog (/blog) page, which can serve as a reference for page structure.

Usage is via the -e flag of create-next-app to pull the template, then install dependencies and run the development command. The repository also provides a CodeSandbox online trial entry. Overall, it is a UI starter scaffold and does not include a backend, database, or deployment configuration.

Next.jsDirectory site

Is it right for your project?

Use Cases

Starting a new project that needs to retain the Next.js Pages Router structure
As a reference for configuring HeroUI and Tailwind CSS under the pages directory
Quickly building UI prototypes with light/dark theme switching
Viewing the template structure and page examples online via CodeSandbox

Suitable For

Developers who accept the Pages Router and are aware of its migration recommendation
Frontend projects using the HeroUI and Tailwind CSS stack
UI prototypes that need basic TypeScript and theme-switching configuration
Those who want to quickly initialize a project using the create-next-app template command

Getting started & customization

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

1
Create a project with npx create-next-app -e https://github.com/heroui-inc/next-pages-template
2
Dependency installation can use npm, yarn, pnpm, or bun; the repository example uses npm install
3
After installation, run npm run dev to start the development server
4
The repository notes that since Next.js 15, the official recommendation is to migrate to the App Router; confirm your routing approach before choosing
5
Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; 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

Free use, modification, commercial use, and distribution of that version's code are permitted.
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

Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses; the code's MIT license alone cannot be used to judge them.
External services such as domains, hosting, databases, payments, or AI may incur separate charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

https://github.com/heroui-inc/next-pages-template/blob/main/LICENSE https://github.com/heroui-inc/next-pages-template/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-01. 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 · 87 / 100
Technologies: Next.js · React
Website type: Directory site

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: 2026-09-26
Screenshot last checked: 2026-10-01

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: 5758281b39f5830bca3fa66faf49c784250a67214f580919d814b38a2ce868ed

2026-10-01T04:11:25.551Z

Source file / repository

# Next.js & HeroUI Template

This is a template for creating applications using Next.js 16 (pages directory) and HeroUI (v3).

[Try it on CodeSandbox](https://githubbox.com/heroui-inc/next-pages-template)

> Note: Since Next.js 15, the pages router is recommend migrating to the [new App Router](https://nextjs.org/docs/app) to leverage React's latest features
>
> Read more: [Pages Router](https://nextjs.org/docs/pages)

## Technologies Used

- [Next.js 16](https://nextjs.org/docs/getting-started)
- [HeroUI v3](https://heroui.com)
- [Tailwind CSS](https://tailwindcss.com)
- [Tailwind Variants](https://tailwind-variants.org)
- [TypeScript](https://www.typescriptlang.org)
- [next-themes](https://github.com/pacocoursey/next-themes)

## How to Use

To create a new project based on this template using `create-next-app`, run the following command:

```bash
npx create-next-app -e https://github.com/heroui-inc/next-pages-template
```

### Install dependencies

You can use one of them `npm`, `yarn`, `pnpm`, `bun`, Example using `npm`:

```bash
npm install
```

### Run the development server

```bash
npm run dev
```

## License

Licensed under the [MIT license](https://github.com/heroui-inc/next-pages-template/blob/main/LICENSE).

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

mkdirs

Mkdirs is an open-source directory website template built with Next.js, offering directory entries, categories, collections, tags, and search as core content structures, plus AI-assisted submissions, user authentication and dashboards, free/paid/sponsored submissions via Stripe, Sanity CMS with blog, Resend email and newsletters, SEO…

Next.js · Directory site

snxtw

snxtw is a Next.js App Router starter template with Tailwind CSS and TypeScript, offering prebuilt components, SEO metadata, and a code quality toolchain including ESLint, Prettier, Husky, lint-staged, and Conventional Commit Lint.

Next.js · Directory site

nextjs-directory-site-starter

Nextory is a starter template for directory websites built with Next.js 15 and Tailwind CSS V4.

Next.js · Directory site

next-app-template

A directory site template built with Next.js App Directory and NextUI, integrating Tailwind CSS, Framer Motion, and next-themes.

Next.js · Directory site

Resume-Builder

A purely client-side resume builder built with Next.js and React, offering split-screen live preview, 6 single- and two-column templates, and one-click PDF export via @react-pdf/renderer, with data stored in localStorage.

Next.js · Portfolio

ntt

A web application template using Next.js, TypeScript, and Tailwind CSS. It provides an app directory under src, organizing code into components, pages, styles, utils, and lib, with styles configured via tailwind.config.js.

Next.js · Directory site