Next.js

Super Practical Advanced Tips for Next.js | by Awwwesssooooome | JavaScript in Plain English

Next.js 13 introduced the App Router, a game-changer for building modern web applications. Coupled with the power of Tailwind CSS and Shadcn UI, you can effortlessly create beautiful and performant websites. In this blog, we'll walk through setting up a new Next.js project using the App Router, incorporating Tailwind CSS, and utilizing Shadcn UI for rapid development.

Getting Started

Project Setup:
- Use the create-next-app CLI to set up your project. Choose the "App Router" option during setup:
```
  npx create-next-app@latest my-next-app --ts --app --tailwindcss
```
- This command generates a basic Next.js app with TypeScript, the App Router, and Tailwind CSS integration.
Shadcn UI Installation:
- Install Shadcn UI:
```
  npx shadcn@latest init
```

Configure Tailwind CSS:

If you chose the --tailwindcss option during project setup, Tailwind CSS is already configured. If not, follow the Tailwind CSS installation guide.

Building the App

Let's create a basic layout and a home page.

Create a Layout:

Within the app directory, create a file named layout.tsx:

  "use client";
  import { Inter } from 'next/font/google';
  import { ThemeProvider } from '@/components/theme-provider';

  const inter = Inter({ subsets: ['latin'] });

  export default function RootLayout({ children }) {
    return (
      <html lang="en">
        <head />
        <body className={inter.className}>
          <ThemeProvider>{children}</ThemeProvider>
        </body>
      </html>
    );
  }

This layout sets up the basic HTML structure, loads the Inter font from Google Fonts, and wraps the content in a ThemeProvider (we'll define this later to implement a dark mode).

Create a Home Page:

Inside app/page.tsx:

  "use client";
  import { Heading } from '@/components/ui/heading';

  export default function HomePage() {
    return (
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <Heading title="Welcome to My Next.js App" className="mb-8" />
        <p className="text-gray-700">
          This is a starting point for your Next.js application.
        </p>
      </main>
    );
  }

This home page uses a Heading component from Shadcn UI and styles the content using Tailwind CSS.

Add a Dark Mode Theme:

Create a ThemeProvider component in app/components/theme-provider.tsx:

  "use client";
  import { useTheme } from 'next-themes';
  import { useEffect, useState } from 'react';
  import { cn } from '@/lib/utils';
  import { DarkModeSwitch } from '@/components/ui/dark-mode-switch';

  export function ThemeProvider({ children }) {
    const [mounted, setMounted] = useState(false);
    const { theme, setTheme } = useTheme();

    useEffect(() => {
      setMounted(true);
    }, []);

    if (!mounted) {
      return null;
    }

    return (
      <div className={cn('bg-white dark:bg-gray-900', theme)}>
        <DarkModeSwitch />
        {children}
      </div>
    );
  }

This component uses next-themes for simple dark mode implementation and provides a DarkModeSwitch component (also from Shadcn UI).

Use More Shadcn UI Components:
- Explore the Shadcn UI documentation for more components like Button, Input, Card, etc., and incorporate them into your application.

Running the App

Start the development server:
```
  npm run dev
```
Open http://localhost:3000/ in your browser to see your app running.

Benefits of Using the App Router, Tailwind CSS, and Shadcn UI:

App Router: Provides a structured way to define routes and build more complex applications.
Tailwind CSS: Enables rapid styling with a utility-first approach and pre-built components.
Shadcn UI: Offers a collection of high-quality, well-designed UI components, reducing development time.

Further Enhancements

Data Fetching: Integrate APIs and use Server Components to fetch data and improve performance.
Routing: Utilize features like nested routing and dynamic routing to create more complex navigation.
State Management: Implement state management using libraries like Zustand, Recoil, or Redux if needed.
Deployment: Deploy your Next.js app to a hosting platform like Vercel.

This guide has provided a starting point for building a modern Next.js app with the App Router, Tailwind CSS, and Shadcn UI. Start creating beautiful and performant web applications today!

Building a Modern Next.js App with App Router, Tailwind CSS, and Shadcn UI

Subscribe to my newsletter

G.Subham Kumar Patra

G.Subham Kumar Patra