# Nextra monorepo

See and follow the instructions in the README.md (opens new window) in the branch casiano at the fork of the Nextra monorepo (opens new window).

The Nextra repository uses PNPM Workspaces (opens new window) and Turborepo (opens new window). To install dependencies, run pnpm install in the project root directory.

# Installation

Worked with node v22.2.0 but not with v23.0.0:

➜  nextra-theme-docs git:(casiano) ✗ node --version
v22.2.0

1
2

The Nextra repository uses PNPM Workspaces (opens new window) and Turborepo (opens new window). To install dependencies, run pnpm install in the project root directory.

# Build Nextra Core

cd packages/nextra
pnpm build

1
2

Watch mode: pnpm dev

# Build Nextra Theme

cd packages/nextra-theme-docs
pnpm build

1
2

# Development

# Running the package nextra in watch mode

Set nvm use v22. I went to the packages/nextra directory and run pnpm dev. It uses tsup (opens new window) a utility to bundle TypeScript code.

# Running the package nextra-theme-docs in watch mode

I opened a new terminal; set nvm use v22 and then went to the packages/nextra-theme-docs directory.

➜  nextra git:(casiano) ✗ cd packages/nextra-theme-docs

I run pnpm dev. It concurrently runs

tsup --watch and
TAILWIND_MODE=watch pnpm postcss css/styles.css -o dist/style.css --watch.

Here are the scripts in the package.json file:

➜ nextra-theme-docs git:(casiano) ✗ jq '.scripts' package.json

{
  "build": "tsup",
  "build:all": "pnpm build && pnpm build:tailwind",
  "build:tailwind": "pnpm postcss css/styles.css -o dist/style.css --verbose",
  "clean": "rimraf ./dist ./style.css",
  "dev": "concurrently \"pnpm dev:layout\" \"pnpm dev:tailwind\"",
  "dev:layout": "tsup --watch",
  "dev:tailwind": "TAILWIND_MODE=watch pnpm postcss css/styles.css -o dist/style.css --watch",
  "prepublishOnly": "pnpm build:all",
  "test": "vitest run",
  "types": "tsup --dts-only",
  "types:check": "tsc --noEmit"
}

1
2
3
4
5
6
7
8
9
10
11
12
13

The table below shows the description of some of the available scripts:

Command	Description
pnpm dev	Watch mode
pnpm dev:layout	Watch mode (layout only)
pnpm dev:tailwind	Watch mode (style only)

# Running the example docs in watch mode

I opened a new terminal; set nvm use v22 and then went to examples/docs and run:

➜  docs git:(casiano) ✗ pnpm dev

> example-docs@ dev /Users/casianorodriguezleon/campus-virtual/2223/learning/nextjs-learning/nextra-learning/nextra/examples/docs
> next

⚠ Port 3000 is in use, trying 3001 instead.
⚠ Port 3001 is in use, trying 3002 instead.
⚠ Port 3002 is in use, trying 3003 instead.
  ▲ Next.js 15.0.1
  - Local:        http://localhost:3003

✓ Starting...
  automatically enabled Fast Refresh for 2 custom loaders
✓ Ready in 4.5s

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Any changes to example/docs will be re-rendered instantly.

Here we have used the watch mode for both nextra and the theme in separated terminals. Otherwise, if you update the core or theme packages, a rebuild is required.

# Watching the propagation of the changes

Now, go to file packages/nextra/src/client/components/callout.tsx and change the TypeToEmoji object and modify the warning emoji for warning to '👀' (eye emoji).

packages/nextra/src/client/components/callout.tsx

const TypeToEmoji = {
  default: '💡',
  error: '🚫',
  info: <InformationCircleIcon className="_mt-1" />,
  warning: ' 👀' // '⚠️'
}

1
2
3
4
5
6

Now in the file /examples/docs/src/pages/themes/docs/callout.mdx you have an example of usage of the callout component with the type attribute set to warning:

### Warning

<Callout type="warning">This API will be deprecated soon.</Callout>

```mdx
<Callout type="warning">This API will be deprecated soon.</Callout>
```

1
2
3
4
5
6
7

When we go to the browser and refresh the page we see the eyes emoji in the warning callout:

warning callout

# pnpm workspaces

See chapter pnpm Workspaces