Next.js with Lexical

Manage content with the Lexical editor.

Setup

lando start

Run dev mode or prod mode.

Go to: https://nextlex.lndo.site/

Dev mode

lando dev

Prod mode

lando prod

Next command

lando next <command>

Example: lando next build && lando next start

Add ui components

Use the pre-made script:

lando shadcn add <component-name>

This works just like the shadcn/ui CLI.

Add a new app

Turborepo offers a simple command to add a new app:

lando turbo gen workspace --name <app-name>

This will create a new empty app in the apps directory.

If you want, you can copy an existing app with:

lando turbo gen workspace --name <app-name> --copy

Note

Remember to run pnpm install after copying an app.

pnpm workspaces

Workspaces in pnpm work similar to npm but vary slightly from yarn.

To modify package dependencies in workspaces, you must first change directories into that workspace and then run the pnpm command.

Example:

cd apps/nextlex && pnpm add <package>

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

• nextlex: a Next.js app
• @repo/ui: a React component library (🚀 powered by shadcn/ui)
• @repo/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• @repo/typescript-config: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

This Turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Useful Links

Learn more about the power of Turborepo:

• Tasks
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage

Learn more about shadcn/ui:

• Documentation