Next.js Playground

This is a playground for Next.js features

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

Apps

nextjs13: a Next.js 13 app with Tailwind CSS
nextjs13 app router: a Next.js 13 app that uses the app router with Tailwind CSS

Packages

contentful: a package for pulling blog data from Contentful
dayjs: a package that uses the date utility library Day.js
ui: a stub React component library with Tailwind CSS shared by all Next.js apps
eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
tsconfig: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Building packages/ui

This example is setup to build packages/ui and output the transpiled source and compiled styles to dist/. This was chosen to make sharing one tailwind.config.js as easy as possible, and to ensure only the CSS that is used by the current application and its dependencies is generated.

Another option is to consume packages/ui directly from source without building. If using this option, you will need to update your tailwind.config.js to be aware of your package locations, so it can find all usages of the tailwindcss class names.

For example, in tailwind.config.js:

  content: [
    // app content
    `src/**/*.{js,ts,jsx,tsx}`,
    // include packages if not transpiling
    "../../packages/**/*.{js,ts,jsx,tsx}",
  ],

Utilities

This Turborepo has some additional tools already setup for you:

Tailwind CSS for styles
TypeScript for static type checking
ESLint for code linting
Prettier for code formatting

Getting started

Make sure you've created a .env file with all the listed variables in the .env.example file
Run the following commands to get the project running:

pnpm install
pnpm dev

Running a build

Run the following commands to get a build running:

pnpm install
pnpm build

If deploying on Vercel, you can also enable Remote Caching to share builds across your team and CI