Next.js mit TailwindCSS starten

Einführung

Dieses Tutorial zeigt, wie man Next.js in Kombination mit TailwindCSS installiert, um eine erste Einrichtung für verschiedene Frontend-Projekte zu erstellen.

Next.js ist ein ReactJS-Frontend-Framework mit vielen nützlichen Funktionen. Es kann nicht nur statische Seiten generieren, sondern verfügt auch über fortschrittliche Strategien zum Abrufen von Daten aus verschiedenen Quellen, um dynamische Inhalte anzuzeigen.

TailwindCSS ist ein CSS-Framework, das bei der Anwendung von CSS-Klassennamen einen funktionsorientierten Ansatz verfolgt. Es ermöglicht die effiziente Erstellung moderner Layouts und Designs, ohne sich um Namenskonventionen kümmern zu müssen.

Voraussetzungen

• System mit MacOS, Windows oder Linux
• Die neueste Version von Node.js und npm ist installiert.

Schritt 1 – Next.js installieren

Next.js kann automatisch oder manuell installiert werden.

• Automatisch:

npx create-next-app my-project [--use-npm]

• Manuell:

mkdir ~/my-project && cd ~/my-project
npm install next react react-dom

Nach der Installation von Next.js bearbeiten Sie die neue Datei ~/my-project/package.json und fügen den Abschnitt “script” wie hier gezeigt hinzu:

{
"dependencies": {
<your_dependencies>
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}

Schritt 2 – TailwindCSS installieren

TailwindCSS verwendet PostCSS als Präprozessor und AutoPrefix als zusätzliche Abhängigkeiten. Dies ist optional, aber empfehlenswert, da Tailwind bei Verwendung dieser Plugins einige nützliche Funktionen bietet, z. B. die Verwendung nicht standardmäßiger Schlüsselwörter wie @apply, @theme oder theme(), die in unserer benutzerdefinierten CSS-Datei verwendet werden können.

cd ~/my-project
npm install -D tailwindcss postcss autoprefixer

Anschließend können wir eine Konfigurationsdatei für TailwindCSS erstellen:

npx tailwindcss init -p

Dadurch werden tailwind.config.js und postcss.config.js erstellt.

Schritt 3 – Next.js konfigurieren

Um Routen für unsere Anwendung zu definieren, können wir einfach zusätzliche JavaScript-Dateien zum Anwendungsverzeichnis hinzufügen. In diesem Tutorial konzentrieren wir uns auf Seiten, die nicht dynamisch generiert werden. Dies liegt daran, dass es in vielen Fällen notwendig ist, Routen mithilfe dynamischer Daten zu generieren, beispielsweise basierend auf einer ID. Eine ausführliche Anleitung dazu finden Sie in der Next.js-Dokumentation (stellen Sie sicher, dass im Menü «Anwendungsrouter verwenden» ausgewählt ist).

Seiten hinzufügen

Zum Erstellen von Seiten benötigen Sie ein Unterverzeichnis namens „app“. Innerhalb des Verzeichnisses „app“ benötigen Sie zwei Dateien:

Darüber hinaus können Sie beliebig viele Unterverzeichnisse hinzufügen. Jedes Unterverzeichnis mit einer page.tsx-Datei stellt eine Unterseite Ihrer Anwendung dar.

In diesem Tutorial verwenden wir folgendes Beispiel:

app/
├── layout.tsx # layout of main page and all subpages
├── page.tsx # content main page
└── example-subpage/
├── layout.tsx # additional layout requirements for example-subpage
└── page.tsx # content example-subpage

Dieses Beispiel ergibt zwei Seiten:

http://<ip-address>:3000 # main page
http://<ip-address>:3000/example-subpage # subpage

Wenn Sie Next.js manuell installiert haben, erstellen Sie das Anwendungsverzeichnis:

mkdir ~/my-project/app

Jetzt können Sie Ihren Seiten Inhalte hinzufügen:

• Startseite

nano ~/my-project/app/page.tsx

Verwenden Sie diesen Inhalt für die Startseite:

// ~/my-project/app/page.tsx
export default function Page() {
return <h1 className="text-white text-3xl font-bold pl-5">Welcome to Next.js and TailwindCSS</h1>
}

• Unterseite

Füge ein neues Unterverzeichnis für die Unterseite hinzu und erstelle die Datei page.tsx:

mkdir ~/my-project/app/example-subpage
nano ~/my-project/app/example-subpage/page.tsx

Verwenden Sie diesen Inhalt für die Unterseite:

// ~/my-project/app/example-subpage/page.tsx
export default function Page () {
return (
<>
<div className="flex flex-col place-content-center items-center col-span-1 pr-3">
<div className="border-2 rounded-full p-0.5 border-gray-600 mb-2">
<img
className="rounded-full w-100 h-100"
src="https://picsum.photos/100/100"
alt="random image from unsplash"
/>
</div>
</div>
<div className="col-span-5 pr-3">
<h2 className="text-white text-3xl font-semibold pl-4 mb-3">Welcome to Next.js and TailwindCSS</h2>
<span className="text-gray-500 text-lg font-bold block pl-4 mb-3">Bringing both frameworks together</span>
<p className="text-white pl-4 leading-7">
Cats are believed to be the only mammals who don't taste sweetness. Cats are nearsighted, but their peripheral
vision and night vision are much better than that of humans. Cats are supposed to have 18 toes (five toes on
each front paw; four toes on each back paw). Cats can jump up to six times their length.
</p>
</div>
</>
)
}

Layout hinzufügen (TailwindCSS)

Nachdem wir nun den Inhalt unserer Seiten haben, können wir das Layout hinzufügen, in dem die Seiten angezeigt werden sollen.

• Allgemeines Layout für die Startseite und alle Unterseiten

Wie bereits erwähnt, wird das in app/layout.js definierte Layout automatisch auf die Hauptseite und alle Unterseiten angewendet.

Wählen Sie eine dieser beiden Optionen, um TailwindCSS einzubinden:

• Alternative 1: Über JavaScript

Dies ist eine bequeme Möglichkeit, TailwindCSS hinzuzufügen, ohne zusätzliche Stylesheets schreiben zu müssen.

nano ~/my-project/app/layout.tsx

Nutzen Sie diesen Inhalt:

// ~/my-project/app/layout.tsx
import 'tailwindcss/tailwind.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}

• Alternative 2: Über CSS

Eine weitere Möglichkeit besteht darin, Tailwind-Stile mithilfe von CSS hinzuzufügen. Dazu importieren wir das globale Stylesheet in die Datei app/layout.tsx.

Erstelle app/layout.tsx:

nano ~/my-project/app/layout.tsx

Nutzen Sie diesen Inhalt:

// ~/my-project/app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}

Erstellen Sie die globale Tabellendatei app/global.css:

/* ~/my-project/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Leider bietet Tailwind keine detaillierte Erklärung dafür, was die @tailwind-Direktive bewirkt, außer dass sie generierte Stile (basierend auf der Tailwind-Konfiguration) zur Build-Zeit in das Stylesheet einfügt.

• Benutzerdefiniertes Layout für Unterseiten

Jede Unterseite verfügt über eine eigene Layoutdatei. Zusätzliche Layoutanforderungen können Sie entweder direkt in der Unterseiten-Layoutdatei speichern oder in einem separaten Verzeichnis ablegen und anschließend importieren. Durch das Speichern zusätzlicher Layoutvorgaben in einem separaten Verzeichnis lässt sich das Layout einfacher für mehrere Unterseiten wiederverwenden. Dies ist besonders sinnvoll, wenn Sie dasselbe Layout für mehrere Unterseiten benötigen.

Erstellen Sie ein Verzeichnis für zusätzliche Layouts:

mkdir ~/my-project/components

Zusätzliches Layout erstellen:

nano ~/my-project/components/FancyCard.js

Fügen Sie diesen Inhalt hinzu:

// ~/my-project/components/FancyCard.js
'use client'
import React from 'react'
const FancyCard = ({ children }) => {
return (
<div className="max-w-xl mx-auto">
<div className="p-8 bg-midnight-200 shadow-xl rounded-3xl border-4 border-gray-600">
<div className="grid grid-cols-6 gap-0 divide-x divide-gray-600">
{children}
</div>
</div>
</div>
)
}
export default FancyCard

Erstellen Sie nun die layout.tsx-Datei für Ihre Unterseite und wenden Sie zusätzliche Layoutvorgaben an:

nano ~/my-project/app/example-subpage/layout.tsx

// ~/my-project/app/example-subpage/layout.tsx
import FancyCard from '../../components/FancyCard'
export default function Layout({ children }) {
return <FancyCard>{children}</FancyCard>
}

Wie bereits erwähnt, können Sie Komponenten nach Bedarf weitere Layouts hinzufügen und diese in die layout.tsx-Datei jeder Unterseite einbinden, die das jeweilige Layout verwenden soll (siehe oben). Wenn Sie ein Layout nur einmal verwenden möchten, können Sie es direkt in die layout.tsx-Datei dieser Unterseite einfügen.

Schritt 4 – TailwindCSS konfigurieren

Der letzte Schritt besteht darin, die Konfigurationsdateien für Tailwind und PostCSS anzupassen.

Durch Ausführen von npx tailwindcss init -p wurden bereits zwei Konfigurationsdateien erstellt:

• tailwind.config.js
• postcss.config.js

Wenn wir PostCSS als Präprozessor verwenden möchten, können wir postcss.config.js für zusätzliche Funktionen wie das Hinzufügen von Vendor-Präfixen, das Hinzufügen globaler CSS-Resets oder das Erstellen von @font-face-Regeln verwenden.

Ein weiteres großartiges Feature von Tailwind CSS ist die einfache Anpassbarkeit des Standard-Themes. Durch Ändern der `theme`-Eigenschaft in der `tailwind.config.js` lassen sich Anpassungen vornehmen, z. B. benutzerdefinierte Breakpoints, Farben, Schriftarten oder detailliertere Eigenschaften wie Abstände, abgerundete Ecken oder Schlagschatten. Mit dem `color`-Schlüssel kann dem bestehenden Theme eine eigene Farbpalette hinzugefügt werden.

nano ~/my-project/tailwind.config.js

Fügen Sie folgenden Inhalt hinzu:

// ~/my-project/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
colors: {
...defaultTheme.colors,
'white': '#ffffff',
'black': '#242424',
'midnight': {
'100': '#03060a',
'200': '#001a40',
'300': '#060b17',
// add more color variants if you want to
},
'gray': {
'500': '#6b7280',
'600': '#4b5563',
},
'purple': {
'500': '#6d28d9',
},
// add more colors if you want to
},
},
plugins: [],
}

Zusätzlich erweitern wir das Standardfarbschema, sodass wir weiterhin die Standardfarbpalette von Tailwind verwenden können. Beachten Sie, dass wir nun unsere eigenen Farben auf mehrere Anwendungsklassen anwenden können, indem wir die definierte Farbe und ihre entsprechende Variante, bg-{Farbe}-{Variante}, verwenden. Zum Beispiel:

<div className="bg-midnight-300">
...
</div>

Schritt 5 – Starten Sie die App

Nachdem nun alles eingerichtet ist, können wir das Programm ausführen, um unser Ergebnis zu sehen:

• Zugriff über private IP-Adresse (localhost):

npm run dev

• Zugriff über öffentliche IP-Adresse:

npm run dev -- -H 0.0.0.0

Öffnen Sie beide Seiten in einem Webbrowser:

http://<ip-address>:3000http

://<ip-address>:3000/example-subpage

Das sollte so aussehen:

Ergebnis

Wir haben erfolgreich eine Next.js-Anwendung veröffentlicht, die Tailwind als CSS-Framework verwendet.

Die erstmalige Verwendung von CSS-Frameworks sorgt oft für Kontroversen, und wie üblich gibt es keine allgemeingültige Regel. Manche behaupten, es sei unübersichtlich und schwer lesbar, es unterscheide sich nicht von Inline-Styles oder verletze das Prinzip der Trennung von Belangen. Ich persönlich denke, dass man all diese Punkte widerlegen kann, und empfehle die folgenden beiden Artikel, um sich einen Überblick über beide Seiten zu verschaffen. So können Sie besser einschätzen, ob dieses Framework für Ihr nächstes Projekt geeignet ist.