Skip to content
Get packs

Guide · Open source

How to use taxonomy: clone, configure and run the Next.js 13 app

Updated · written with AI from the project's own documentation and checked against our catalogue data

Taxonomy is an MIT-licensed, TypeScript sample web application from shadcn-ui, built with Next.js 13 to explore the App Router and server components. This guide shows how to get it running locally and what to look at in the code. It is aimed at developers and students who already know some React and Next.js.

Taxonomyshadcn-ui/taxonomy · ★ 19.3k · MIT

Quick start

  1. 1Check prerequisites. Make sure Node.js and pnpm are installed on your machine.
  2. 2Clone the repository. Download the shadcn-ui/taxonomy source from GitHub to a local folder.
  3. 3Install dependencies. Run pnpm install in the project folder.
  4. 4Create the environment file. Run cp .env.example .env.local, then open .env.local and update the variables.
  5. 5Start the development server. Run pnpm dev and open the address shown in the terminal.
  6. 6Read the code. Use the feature list in the README to find routing, data fetching and component examples in the /app directory.

What Taxonomy is and who it is for

Taxonomy is a sample app, not a finished product. The author started it while the Next.js App Router was in public preview, to see how a modern app with login, subscriptions, API routes and a docs and blog section would work with server components.

The project is officially archived and will no longer receive updates. The README says its code does not reflect current best practices, may contain deprecated APIs, and is not recommended for production. Treat it as a reference or learning example.

  • Good fit: developers learning the App Router and server components
  • Good fit: students studying how authentication, a database and payments fit together
  • Good fit: developers who want a reference for combining Tailwind CSS and Radix UI
  • Poor fit: anyone who needs a production app or ongoing updates
  • Poor fit: beginners who have never used React or Next.js

What you need before you start

The README lists two prerequisites: Node.js and pnpm. The project is set up as a clone-and-build repository, so you download the source and run it on your own machine.

You will also need a copy of the environment file. The README tells you to copy .env.example to .env.local and update the variables in it. The README does not list the specific values, so check the example file for what each one expects.

  • Node.js
  • pnpm

Install and run Taxonomy locally

Clone the repository, then run the three steps from the README in the project folder. First install dependencies with pnpm, then copy the environment file, then start the development server.

The README does not describe what the page looks like once the server starts, so open the address the terminal prints and explore from there.

  • Install dependencies using pnpm
  • Copy .env.example to .env.local and update the variables
  • Start the development server with pnpm dev
pnpm install cp .env.example .env.local pnpm dev

Explore the features in the code

The README lists the features the app demonstrates. Use this list as a map of what to read. The app lives in the /app directory, which is where the App Router features are used.

Good places to start are routing with layouts and layout groups, data fetching and mutation, loading UI, route handlers, and the split between server and client components. Other features include NextAuth.js for authentication, Prisma as the ORM, PlanetScale for the database, Stripe for subscriptions, Zod for validation, and MDX with Contentlayer for the docs and blog.

  • Routing, layouts, nested layouts and layout groups
  • Data fetching, caching and mutation
  • Loading UI and metadata files
  • Route handlers, API routes and middlewares
  • Server and client components
  • Authentication with NextAuth.js
  • ORM with Prisma and a database on PlanetScale
  • Subscriptions with Stripe
  • Docs and blog with MDX and Contentlayer
  • Validation with Zod, styling with Tailwind CSS, components from Radix UI

Know the known issues before you rely on it

The README has a Known Issues list. Several items are struck through as fixed, but some remain open. At the time of the README, GitHub authentication was not working and the app suggested using email sign-in instead.

One open issue is that opengraph-image.tsx cannot be used inside catch-all routes. Read the list before you build on any of these areas.

  • GitHub authentication was listed as not working; use email instead
  • Cannot use opengraph-image.tsx inside catch-all routes (still listed as open)

How to use Taxonomy as a learning reference

The most useful way to use Taxonomy is to read it alongside the official Next.js docs. Change one feature at a time, such as a layout or a route handler, and watch what breaks. Because the code may use deprecated patterns, compare anything you copy against current Next.js documentation.

The README points to the Vercel Templates directory for maintained Next.js starters, which is a better base for a new project.

  • Change one feature at a time and observe the result
  • Check patterns against current Next.js documentation before reusing them
  • Use the Vercel Templates directory for a maintained starter

What people use it for

  • Studying how server components fetch data in a Next.js 13 app
  • Seeing how NextAuth.js, Prisma and Stripe are wired together in one codebase
  • Using the Tailwind CSS and Radix UI component setup as a reference for your own UI
  • Reading how MDX and Contentlayer power a docs and blog section

Frequently asked questions

Is Taxonomy free to use?

Taxonomy is licensed under the MIT license, as linked from the README. The license permits you to read, clone and adapt the code under its terms. Check the LICENSE.md file in the repository for the full text.

What do I need to install Taxonomy?

The README lists Node.js and pnpm as the prerequisites. You clone the repository, run pnpm install, copy .env.example to .env.local, and start the app with pnpm dev.

Can I use Taxonomy in production?

No. The README says the code is not recommended for production environments, may contain deprecated APIs, and does not reflect current best practices. It is best used as a learning reference.

Will Taxonomy receive updates?

No. The project has been officially archived and will no longer receive updates, according to the README.

Do I need to know React or Next.js first?

Yes, the project assumes existing familiarity with React and Next.js. Beginners who have never used either are likely to find the code hard to follow.

What are good alternatives to Taxonomy?

The README points to the Vercel Templates directory for Next.js starters. Other projects often compared with it include Next.js Commerce and Supastarter.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Taxonomy suits developers and students who already know React and Next.js and want a working reference for the App Router, server components, authentication, payments and MDX content in one app. It is not suitable for production use or for anyone who needs ongoing updates, since the project is archived. For a maintained starter, look at the Vercel Templates directory or a current project such as Supastarter.

Install options & downloads