• Stars
    star
    13,813
  • Rank 2,222 (Top 0.05 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 2 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An open source application built using the new router, server components and everything new in Next.js 13.

Taxonomy

An open source application built using the new router, server components and everything new in Next.js 13.

Warning
This app is a work in progress. I'm building this in public. You can follow the progress on Twitter @shadcn. See the roadmap below.

About this project

This project as an experiment to see how a modern app (with features like authentication, subscriptions, API routes, static pages for docs ...etc) would work in Next.js 13 and server components.

This is not a starter template.

A few people have asked me to turn this into a starter. I think we could do that once the new features are out of beta.

Note on Performance

Warning
This app is using the unstable releases for Next.js 13 and React 18. The new router and app dir is still in beta and not production-ready. Expect some performance hits when testing the dashboard. If you see something broken, you can ping me @shadcn.

Features

  • New /app dir,
  • Routing, Layouts, Nested Layouts and Layout Groups
  • Data Fetching, Caching and Mutation
  • Loading UI
  • Route handlers
  • Metadata files
  • Server and Client Components
  • API Routes and Middlewares
  • Authentication using NextAuth.js
  • ORM using Prisma
  • Database on PlanetScale
  • UI Components built using Radix UI
  • Documentation and blog using MDX and Contentlayer
  • Subscriptions using Stripe
  • Styled using Tailwind CSS
  • Validations using Zod
  • Written in TypeScript

Roadmap

  • Add MDX support for basic pages
  • Build marketing pages
  • Subscriptions using Stripe
  • Responsive styles
  • Add OG image for blog using @vercel/og
  • Dark mode

Known Issues

A list of things not working right now:

  1. GitHub authentication (use email)
  2. Prisma: Error: ENOENT: no such file or directory, open '/var/task/.next/server/chunks/schema.prisma'
  3. Next.js 13: Client side navigation does not update head
  4. Cannot use opengraph-image.tsx inside catch-all routes

Why not tRPC, Turborepo or X?

I might add this later. For now, I want to see how far we can get using Next.js only.

If you have some suggestions, feel free to create an issue.

Running Locally

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

License

Licensed under the MIT license.

More Repositories

1

next-contentlayer

A template with Next.js 13 app dir, Contentlayer, Tailwind CSS and dark mode.
TypeScript
674
star
2

next-template

A Next.js 13 template for building apps with Radix UI and Tailwind CSS.
TypeScript
277
star
3

next-mdx

next-mdx provides a set of helper functions for fetching and rendering local MDX files. It handles relational data, supports custom components, is TypeScript ready and really fast.
TypeScript
190
star
4

crepido

Create (kanban) boards to track users and projects from flat markdown files. Supports multiple projects, timers, progress bars, collapsible sections and custom colors.
CSS
178
star
5

Sketch-Navigator

"Sketch Navigator lets you quickly jump to any specific artboard without having to scan the all too easily cluttered Layers List in the app’s left-hand pane." - Khoi Vinh
JavaScript
160
star
6

drupal-template-helper

Debug Drupal 8 templates in Chrome Devtools. drupal-template-helper is a chrome extension for Drupal that lists all available templates and the preprocess hooks to use to customize your templates.
JavaScript
117
star
7

license-generator

Generates a license for your open source project.
JavaScript
110
star
8

example-ui-themes

TypeScript
78
star
9

Sketch-Sass-Colors

Displays colors as Sass variables for Sketch
70
star
10

next-template-jsx

A Next.js 13 template for building apps with Radix UI and Tailiwnd CSS.
JavaScript
61
star
11

kaizoku

A CLI for the Pirate Bay that can search for torrent and automatically add it to your torrent client or stream it using VLC.
JavaScript
60
star
12

tree-to-image

A tree to image generator using @vercel/og
TypeScript
53
star
13

subdb-cli

Download subtitles from the command line
JavaScript
44
star
14

next-cms-wordpress

An example Next.js 13 app built from WordPress data.
TypeScript
36
star
15

vite-template

Created with CodeSandbox
TypeScript
29
star
16

Google-Form-Octopress

A Liquid tag to embed Google Forms in Octopress
Ruby
24
star
17

gatsby-theme-twentytwentyone

This is the WordPress Twenty Twenty-One theme built for Gatsby.
CSS
23
star
18

example-battlefield-chart

example chart
TypeScript
17
star
19

next-template-debug

next-template-debug
TypeScript
12
star
20

CrossBrowse

Simple proof of concept for tracking element position across clients.
JavaScript
12
star
21

status.arshad.io

CSS
10
star
22

next-app-tailwind-template

A (personal) starter template with app dir and Tailwind CSS.
TypeScript
8
star
23

next-prisma-app

next-prisma-app
TypeScript
8
star
24

next-drupal-examples

Examples for Next.js for Drupal
TypeScript
7
star
25

next-ghost

TypeScript
6
star
26

radix-bootswatch

Bootswatch for Radix
CSS
6
star
27

compass_radix

A Compass extension for Drupal's Radix theme.
CSS
6
star
28

datamaps-custom-marker

A datamaps plugin for custom map markers
JavaScript
6
star
29

gatsby-plugin-theme-helpers

An experimental plugin to help with component shadowing discovery.
JavaScript
6
star
30

gatsby-starter-flex

A Gatsby starter for the Flex theme.
JavaScript
5
star
31

value

Simplified Twig template variables for Drupal
PHP
5
star
32

nextjs-gatsby

This is nextjs.org home page built with Gatsby and Reflex.
JavaScript
4
star
33

reflexjs-example

https://reflexjs-example.vercel.app
TypeScript
3
star
34

airtv

A CLI for TV shows air dates
JavaScript
3
star
35

gatsby-starter-phoenix

A Gatsby starter for Phoenix
JavaScript
3
star
36

create-shadcn

Template
3
star
37

next-debug-head

Debugging Head.tsx in Next.js 13
TypeScript
3
star
38

react_module_boilerplate

Boilerplate for Drupal 8 module with React, ES6, Babel and Webpack.
JavaScript
2
star
39

next-mdx-simple-blog

A simple blog with categories built using next-mdx.
TypeScript
2
star
40

reflex-redwood

JavaScript
2
star
41

simplytest-chrome

A Google Chrome extension for simplytest.me
JavaScript
2
star
42

mdx-toc

JavaScript
2
star
43

gatsby-example-flex

Demo site for the Gatsby Flex theme.
JavaScript
2
star
44

expressjs_starter

Template for Express app with Requirejs, Backbone, and Jade templating.
JavaScript
2
star
45

next-drupal-debug

JavaScript
2
star
46

scrapdo

Scrapdo is a scrapper for Drupal.org built with node.
JavaScript
2
star
47

slick

Slick carousel for Drupal
PHP
2
star
48

radix_stanley

Radix Stanley is a theme coded by BlackTie and ported to Drupal. It is based on Radix.
CSS
2
star
49

do-api

An API for drupal.org built with scrapdo and Express.
JavaScript
1
star
50

mdnext-reflexjs-demo

Demo for Nextjs, MDX and Reflexjs.
TypeScript
1
star
51

reflexjs-product-docs

Demo for gatsby-theme-doc
JavaScript
1
star
52

nextjs-middleware-validation

Validation middlewares for Next.js API routes with Yup.
TypeScript
1
star
53

h5bpbu

HTML 5 Boilerplate with Backbone.js and Underscore.js
JavaScript
1
star
54

jsonapi_config

Configuration for the JSON API module.
PHP
1
star
55

block_subtitle

This module allows subtitle to be added to blocks.
1
star
56

radix_bootswatch_themes

A collection of Radix Bootswatch themes.
CSS
1
star
57

vagrant-drupal

Vagrant for Drupal development
Ruby
1
star
58

drupal_tests

Skeleton Drupal feature for Acceptance testing with Behat
PHP
1
star
59

lerna-test

Shell
1
star
60

next-drupal-basic-starter

A simple starter for building your site with Next.js and Drupal.
TypeScript
1
star
61

teamworkpm

A node wrapper for the TeamworkPM API
JavaScript
1
star
62

twig_not_empty

Adds a Twig notEmpty test for Drupal 8
PHP
1
star
63

imgs

www.imgs.io
1
star
64

reflex-mdx-js

Example Reflex site using MDX and JSX components. See https://github.com/reflexjs/reflex to build your Reflex site.
JavaScript
1
star
65

next-debug-edge-runtime

next-debug-edge-runtime
TypeScript
1
star
66

wp-gatsby-extended

Extends the WPGatsby WordPress plugin with custom GraphQL Types.
PHP
1
star
67

adminify

Simplify the Drupal admin
1
star
68

gatsby-theme-phoenix-disqus

Gatsby theme with Disqus
JavaScript
1
star
69

radix_layouts

Responsive Panels layouts for Radix.
PHP
1
star
70

Tray

This module provides a tray to your Drupal site. This tray can be used as an application bar.
PHP
1
star
71

next-drupal-auth

TypeScript
1
star
72

cms-drupal

A statically generated blog example using Next.js and Drupal
JavaScript
1
star
73

next-mdx-post-snippet

TypeScript
1
star