{"post":{"id":"80","slug":"nx-nextjs15-frontend-part-2","title":"Nx Monorepo Essentials: Crafting a Next.js 15 Frontend (Part 2/3)","excerpt":"Deep dive into Next.js 15 App Router within an Nx workspace. Learn how to set up, structure, and optimize your frontend for scale in this part 2 of our monorepo series.","content":"\r\n# Nx Monorepo Essentials: Crafting a Next.js 15 Frontend (Part 2/3)\r\n\r\n> **By Sidharrth Mahadevan** | Published: February 22, 2025\r\n> [Original Article on Medium](https://medium.com/@sidharrthnix/building-a-next-js-15-app-with-app-router-in-nx-a-fun-and-focused-guide-42b958a7f04c)\r\n\r\n---\r\n\r\n## Introduction\r\n\r\nWelcome back to our Nx monorepo series! In [Part 1](/blog/nx-monorepo-essentials-part-1), we set up our Nx workspace and explored the benefits of a unified codebase. Now, we're diving into **Next.js 15** — specifically leveraging its **App Router** feature for a clean, scalable frontend.\r\n\r\nThink of it as assembling a high-tech Lego set where each piece snaps perfectly into place.\r\n\r\n---\r\n\r\n## Series Overview\r\n\r\n- **Part 1:** Nx Monorepo Essentials: Laying the Foundations\r\n- **Part 2:** Nx Monorepo Essentials: Crafting a Next.js 15 Frontend *(You're here!)*\r\n- **Part 3:** Nx Monorepo Essentials: Integrating a NestJS Backend\r\n\r\n---\r\n\r\n## Workspace Structure Recap\r\n\r\nBefore we start, here's a reminder of where everything lives in our monorepo:\r\n\r\n```\r\nmy-workspace/\r\n├── apps/\r\n│ └── client/ # Our Next.js frontend app\r\n├── libs/ # Shared libraries\r\n├── nx.json\r\n└── package.json\r\n```\r\n\r\n---\r\n\r\n## Setting Up Next.js in Your Nx Workspace\r\n\r\nLet's kick things off by adding the Next.js plugin to your Nx workspace and generating a Next.js 15 app:\r\n\r\n```bash\r\n# Add the Next.js Nx plugin\r\nnx add @nx/next\r\n\r\n# Generate a new Next.js application\r\nnx g @nx/next:app client\r\n```\r\n\r\n> **Why \"client\"?** The name is up to you, but \"client\" is a clear choice for a frontend app. If you named it \"my-next-app,\" that works too!\r\n\r\n---\r\n\r\n## Generated App Structure\r\n\r\nOnce generated, you'll find your new Next.js app under the `client/` directory with this structure:\r\n\r\n```\r\nclient/\r\n├── src/\r\n│ ├── app/\r\n│ │ ├── layout.tsx\r\n│ │ └── page.tsx\r\n├── public/\r\n├── next.config.js\r\n├── project.json\r\n└── tsconfig.json\r\n```\r\n\r\nEach file and folder has its place, ready for you to start coding.\r\n\r\n---\r\n\r\n## The App Router\r\n\r\nNext.js 15's **App Router** keeps your routing clean and intuitive — think of it as GPS for your app's navigation. All routes live inside `src/app/`, and each folder corresponds to a URL segment.\r\n\r\n### Creating Your Home Page\r\n\r\n```tsx\r\n// client/src/app/page.tsx\r\nexport default function HomePage() {\r\n return (\r\n

\r\n

Welcome to Next.js 15 with Nx!

\r\n

\r\n )\r\n}\r\n```\r\n\r\n### Layout Component\r\n\r\nThe `layout.tsx` file wraps all pages and is perfect for shared UI like navigation bars and footers:\r\n\r\n```tsx\r\n// client/src/app/layout.tsx\r\nexport default function RootLayout({\r\n children,\r\n}: {\r\n children: React.ReactNode\r\n}) {\r\n return (\r\n \r\n {children}\r\n \r\n )\r\n}\r\n```\r\n\r\n---\r\n\r\n## Running the Development Server\r\n\r\nFire up your development server with this command. It's so fast, you'll think it took a shortcut:\r\n\r\n```bash\r\nnx serve client\r\n```\r\n\r\nYour app will be available at `http://localhost:4200` by default.\r\n\r\n---\r\n\r\n## Building for Production\r\n\r\n```bash\r\nnx build client\r\n```\r\n\r\nThe build artifacts will be stored in the `dist/` directory.\r\n\r\n---\r\n\r\n## Running Tests\r\n\r\nTesting your app is like checking the milk's expiration date — it's better to do it before things go sour:\r\n\r\n```bash\r\nnx test client\r\n```\r\n\r\n---\r\n\r\n## Best Practices\r\n\r\n### Keep Components Simple\r\nSmaller components are easier to read, test, and maintain. Break down complex UI into focused, reusable pieces.\r\n\r\n### Leverage the App Router\r\nIt's clean and intuitive. Use route groups, layouts, and loading states to your advantage.\r\n\r\n### Minimize Dependencies\r\nEach new library is like a knick-knack on your shelf. A few are nice; too many is clutter. Be deliberate about what you add.\r\n\r\n### Optimize Builds\r\nFaster builds = more coffee breaks (science says so). Use `nx affected` to only rebuild what has changed.\r\n\r\n---\r\n\r\n## Using Shared Libraries\r\n\r\nOne of Nx's greatest strengths is easy code sharing. Create a shared library and import it in your Next.js app:\r\n\r\n```bash\r\n# Generate a shared UI library\r\nnx g @nx/react:lib ui-shared\r\n\r\n# Use it in your Next.js app\r\n# import { MyComponent } from '@myorg/ui-shared';\r\n```\r\n\r\n---\r\n\r\n## What's Next?\r\n\r\nThat's it for Part 2 of our Nx Monorepo Series. You've got your Next.js 15 app running inside Nx, and the App Router is all set to keep your code clean and structured.\r\n\r\nIn **Part 3**, we'll spin up a minimal **NestJS backend** within the same monorepo, connecting it seamlessly with your Next.js frontend. We promise to keep it straightforward — so straightforward your grandma could build it!\r\n\r\n---\r\n\r\n*Thanks for reading! If you enjoyed this guide, be sure to check out the rest of the series.*\r\n ","category":"Tutorial","author":"Sidharrth Mahadevan","published_at":"2025-02-22T00:00:00.000Z","read_time":"8 min read","image_url":"https://miro.medium.com/v2/resize:fit:1100/format:webp/1*_Ylcck6pH9hX4g5I_N5G6A.png","tags":["Nx","Monorepo","Next.js","React","Frontend"],"featured":false,"created_at":"2026-04-01T05:52:01.241Z","image_attribution":"Image by Unsplash"}}