https://github.com/nilshartmann/nextjs-intro

https://github.com/nilshartmann/nextjs-intro

Last synced: about 5 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/nilshartmann/nextjs-intro
• Owner: nilshartmann
• Created: 2024-03-06T07:31:29.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-11T06:57:14.000Z (8 months ago)
• Last Synced: 2024-05-15T15:40:28.379Z (6 months ago)
• Language: TypeScript
• Size: 95.7 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vorbereitung

## backend installieren und starten

Das "Backend" ist ein einfacher Node.js-Prozess, der auf Port 7002 lauscht.

- Port 7002 muss also frei sein :-)

```bash

cd backend

npm install

npm start

```

Wenn das Backend gestartet ist, werden einige URLs ausgegeben, die zum Testen im Browser oder per curl o.ä. aufgerufen werden können. In der Regel sollte aber alles funktionieren.

## next.js installieren und starten

Im Verzeichnis `nextjs-workspace` ist ein Next.js-Projekt vorhanden. Damit wir uns auf die Next.js-spezifika konzentrieren können, habe ich dort schon einige "normale" React-Komponenten angelegt und auch Code vorbereitet, den wir zum Zugriff auf das Backend verwenden werden.

- Der Next.js-Server läuft auf **Port 3000**, d.h. auch dieser Port muss frei sein.

**Zur Vorbereitung:**

```bash

cd nextjs-workspace

npm install

npm run dev:clean

```

Next.js sollte jetzt auf Port 3000 laufen. Wenn Du `http://localhost:3000` aufmachst, müsste eine von Next.js erzeugte "Not Found"-Seite erscheinen (da steht dann: `404 This page could not be found.`). Die Inhalte dafür bauen wir dann gemeinsam.

# Branches

* `main` Ausgangsmaterial für das Live Coding. Einige "normale" React-Komponenten und ein paar Helfer-Funktion zum Zugriff auf die Backend API sind bereits vorhanden. Der Next.js-spezifische Teil fehlt

* [`2024_03_08_nca-live-coding`](https://github.com/nilshartmann/nextjs-intro/tree/2024_03_08_nca-live-coding) Ergebnis nach dem [YouTube Livestream bei Never Code Alone](https://youtube.com/live/gKzcTk1zI_U)