Nx Monorepo Essentials: Crafting a Next.js 15 Frontend (Part 2/3)

Nx Monorepo Essentials: Crafting a Next.js 15 Frontend (Part 2/3) | AI-Hub Blog | AI Hub

my-workspace/
├── apps/
│   └── client/          # Our Next.js frontend app
├── libs/                # Shared libraries
├── nx.json
└── package.json

# Add the Next.js Nx plugin
nx add @nx/next

# Generate a new Next.js application
nx g @nx/next:app client

client/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   └── page.tsx
├── public/
├── next.config.js
├── project.json
└── tsconfig.json

// client/src/app/page.tsx
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to Next.js 15 with Nx!</h1>
    </main>
  )
}

// client/src/app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

nx serve client

nx build client

nx test client

# Generate a shared UI library
nx g @nx/react:lib ui-shared

# Use it in your Next.js app
# import { MyComponent } from '@myorg/ui-shared';

Nx Monorepo Essentials: Crafting a Next.js 15 Frontend (Part 2/3)

Nx Monorepo Essentials: Crafting a Next.js 15 Frontend (Part 2/3)

Introduction

Series Overview

Deepen Your Knowledge

Stay updated with the latest in AI

Workspace Structure Recap

Setting Up Next.js in Your Nx Workspace

Generated App Structure

The App Router

Creating Your Home Page

Layout Component

Running the Development Server

Building for Production

Running Tests

Best Practices

Keep Components Simple

Leverage the App Router

Minimize Dependencies

Optimize Builds

Using Shared Libraries

What's Next?