Next.js Integration Tutorial
This guide will walk you through setting up a Next.js application with the Nova Design System, including proper configuration of TypeScript, Tailwind CSS, and Nova components.
Prerequisites
Before starting, ensure you have the following ready:
- Node.js (version 18 or higher)
- npm or yarn package manager
- Basic knowledge of React and Next.js
Step 1: Create a New Next.js Application
Start by creating a new Next.js application using the official create-next-app tool:
npx create-next-app@latest
During the interactive setup, make sure to select the following options:
- TypeScript: Yes ✓
- ESLint: Yes (recommended)
- Tailwind CSS: Yes ✓
- src/ directory: Yes (recommended)
- App Router: Yes (recommended)
- Import alias: Keep default (@/*)
This will create a new Next.js project with TypeScript and Tailwind CSS pre-configured.
Step 2: Install Nova Design System Packages
Navigate to your project directory and install the required Nova packages:
npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-react
These packages include:
- nova-webcomponents: Core web components library
- nova-base: Base styles, themes, and utilities
- nova-react: React wrapper components for Nova
Step 3: Configure Tailwind CSS
Replace the default Tailwind configuration with Nova's theme. Create or update your tailwind.config.ts file in the root directory:
// tailwind.config.ts
import type { Config } from 'tailwindcss'
import { novaTailwindTheme } from "@nova-design-system/nova-base/theme"
export default {
theme: novaTailwindTheme,
} satisfies Config
Step 4: Update Global Styles
Replace the entire contents of src/app/globals.css with the following:
@import "tailwindcss";
@import "@nova-design-system/nova-base/dist/css/spark.css";
@config "../../tailwind.config.ts";
@plugin "@nova-design-system/nova-base/theme/plugin";
@custom-variant dark (&:where(.dark, .dark *));
This configuration will:
- Imports Tailwind CSS base styles
- Imports Nova's Spark design tokens
- Configures the Nova tailwind plugin
- Sets up dark mode support
Step 5: Configure TT Norms, our custom font
Add the stylesheet hosted on our CDN in the <Head> tag of your layout.tsx file. Since this font is licensed for Elia Group only, you will find the exact URL in our wiki
Step 6: Use Your First Nova Component and Nova tailwind utils
Now you can start using Nova components in your application. Update src/app/page.tsx:
import { NvButton } from "@nova-design-system/nova-react";
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<div className="max-w-5xl w-full">
<h1 className="text-4xl font-bold mb-8 text-center">
Welcome to Nova Design System
</h1>
<div className="flex gap-4 justify-center">
<NvButton>Primary Button</NvButton>
</div>
</div>
</main>
);
}
Step 7: Dark Mode Support
Nova Design System includes built-in dark mode support. To implement a dark mode toggle:
'use client';
import { useState, useEffect } from 'react';
import { NvButton } from "@nova-design-system/nova-react";
export function DarkModeToggle() {
const [isDark, setIsDark] = useState(false);
useEffect(() => {
// Check initial dark mode preference
setIsDark(document.documentElement.classList.contains('dark'));
}, []);
const toggleDarkMode = () => {
if (isDark) {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}
setIsDark(!isDark);
};
return (
<NvButton onClick={toggleDarkMode}>
{isDark ? 'Light Mode' : 'Dark Mode'}
</NvButton>
);
}
Troubleshooting
Common Issues and Solutions
1. Components not rendering properly
- Ensure all Nova CSS imports are in globals.css
- Check that Tailwind config is properly set up
- Verify Nova packages are installed correctly
2. TypeScript errors
- Update TypeScript to the latest version
- Ensure @types/react and @types/react-dom are up to date
- Check that Nova types are being resolved correctly
3. Dark mode not working
- Verify the dark variant is configured in globals.css
- Ensure dark class is being applied to the html element
4. Build errors
- Clear .next cache: rm -rf .next
- Delete node_modules and reinstall: rm -rf node_modules && npm install
- Check for any peer dependency warnings
Additional Resources
Happy coding with Nova Design System and Next.js! 🚀