This a Turborepo monorepo starter that uses Tailwind, Prisma, and i18next. It also uses a type-safe shared environment variables. If you don't need the i18next, you can check out the turborepo-tailwind-prisma-nextjs-starter.
- Clone this repo then go to the directory
- Run
pnpm install
- Run
cp packages/env/.env.example packages/env/.env && ./dev-bootstrap.sh
to set up the environment variables - Run
docker-compose up
to run the Postgres database - Open a new terminal tab then run
cd packages/database/ && pnpm db:migrate:reset
. You only need to do this once. - Back to the root directory then run
pnpm run dev
- Open in browser http://localhost:3000 for the
web
Next.js app and http://localhost:3001 for thedocs
Next.js app.
This Turborepo includes the following packages/apps:
docs
: an example Next.js 13 (App Router) app with Tailwind CSS.web
: another example Next.js 13 (App Router) app with Tailwind CSS and Prisma.ui
: a stub React component library with Tailwind CSS shared by bothweb
anddocs
applications.eslint-config-custom
:eslint
configurations (includeseslint-config-next
andeslint-config-prettier
).tsconfig
:tsconfig.json
s used throughout the monorepo.database
: the schema and client of Prisma used by bothweb
anddocs
applications.env
: the typed safe environment variables used throught the monorepo using t3-env.i18n
: the code and translations for the internationalization used in theweb
application.
Notes:
- Each package/app is 100% TypeScript.
- Every component in the
ui
package is a Client component. The"use client"
directive is added automatically bypackages/ui/scripts/post-build.sh
script. Adding"use client"
directive in the component files do nothing because tsup/esbuild strip the off. - The live version of
web
app can be found in https://turbo-next-prisma-tailwind-web.vercel.app/. - The live version of
docs
app can be found in https://turbo-next-prisma-tailwind-docs.vercel.app/.
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
- Prisma for database ORM
- Next-i18next for internationalization.
During development, this monorepo uses single environment variable file located in packages/env/.env
. When you execute the ./dev-bootstrap
script, it creates symlink for the .env
file into the other apps and packages. You can then read the environment variables by importing the env
package.
import { env } from "env";
console.log(env.HELLO_WORLD);
console.log(env.NEXT_PUBLIC_HELLO_WORLD);
The env
package exports a type-safe environment variables using t3-env and zod.
Notes:
- Don't read the environment variables directly from
process.env
. - Only edit the
packages/env/.env
file if you want to add, edit, or remove environment variables. Keep thepackages/env/.env
as the single source - Use
env.NEXT_PUBLIC_<name>
if you want to read the variable from a Client component. If you read aenv.<name>
variable from a Client component, you'll get error. - If you make changes to server environment variables or the client environment variables, you need to edit the
packages/env/src/index.ts
file too.
To add support for multiple languages in any Next.js apps in the apps
directory,
-
you need to use
[lng]
route param. -
Call
useTranslation
in the page's server component.// import useTranslation from our local i18n package import { useTranslation } from "i18n"; // with `client-page` namespace const { t } = await useTranslation(lng, "client-page"); // or without the namespace const { t } = await useTranslation(lng);
-
Call
t("to-second-page")
to get translated strings.
Notes:
- The translation strings are stored in the
public/locales/de
,public/locales/en
, andpublic/locales/it
directories. - To change the settings for i18next, edit the
packages/i18n/src/settings/index.ts
file. - More information about using i18next with Next.js App Route can be found in 18next guide.
- Add new workspace:
turbo gen workspace
- Copy a workspace:
turbo gen workspace --copy
- Add npm package to a workspace:
pnpm add <package_name> --filter workspace
- If VSCode shows error:
Cannot find module 'ui' or its corresponding type declarations.ts(2307)
or for any modules, restart the TS Server: PressCmd+Shift+P
then typerestart ts
, then Enter to restart the typescript server. For convenience, I changed the keyboard shortcut in VSCode to restart the TypeScript server toCmd+shift+§
. - If VSCode shows error
Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key
errors, you need to use the TypeScript version in the workspace. PressCmd+Shift+P
, then typeSelect TypeScript version..
, then selectUse Workspace version
which is the version 5.1.3 as of this writing.