Next.js with a separate server - good idea?

Summary

Dieses Video skizziert die Vorteile von Next.js als Full-Stack-Framework, das sowohl Client- als auch Server-Komponenten beinhaltet. Es erklärt die Implementierung von Server-Aktionen und Route-Handlers für traditionelle API-Routen und wie diese für Datenbankzugriff und Webhooks eingesetzt werden können. Der Sprecher diskutiert die Notwendigkeit eines separaten Servers für anspruchsvolle Projekte und die Herausforderungen von serverlosen Funktionen. Er demonstriert außerdem, wie man mit dem Authentifizierungstool 'Kind' einen sicheren Datenaustausch zwischen Next.js-Anwendungen und benutzerdefinierten Servern gewährleistet und die Vorteile eines solchen Aufbaus hervorhebt.

Takeaways

• 😀 Next.js ist ein Full-Stack-Framework, das sowohl Client- als auch Server-Komponenten bietet.
• 🛠️ Server-seitige Funktionen in Next.js umfassen Server-Aktionen, Route-Handler und traditionelle API-Routen.
• 💡 Mit Next.js können traditionelle Server-Aufgaben durchgeführt werden, einschließlich Datenbankzugriff und Webhook-Verarbeitung.
• 🔒 Für größere Projekte ist oft ein separates, benutzerdefiniertes Backend erforderlich, auch wenn Next.js bereits eingesetzt wird.
• 🌐 Bei der Bereitstellung auf Vercel werden Next.js Seiten zu statischen Assets, während dynamische Berechnungen serverlose Funktionen zugeordnet werden.
• ⏱️ Serverlose Funktionen haben Einschränkungen, z.B. können Aufgaben nur für eine begrenzte Zeit ausgeführt werden.
• 🚫 Bestimmte Aufgaben, wie z.B. Video-Rendering oder Web Scraping, sind möglicherweise für Serverlose Funktionen ungeeignet.
• 🔌 Serverlose Funktionen führen zu Verbindungsproblemen mit Datenbanken, wenn viele Anfragen gleichzeitig kommen.
• 💨 Sie haben den Nachteil von 'cold starts', was zu Verzögerungen bei der Initialisierung führen kann.
• 🗄️ Serverlose Funktionen bieten keinen persistenten Dateisystemzugriff, was bestimmte Anwendungen einschränken kann.
• 🔒 Authentifizierung ist ein wichtiger Aspekt, wenn ein separates API-Server neben einer Next.js-Anwendung eingesetzt wird, und kann mit Tools wie Auth0 erleichtert werden.

Q & A

Was ist Next.js und welche Funktionen bietet es?

Next.js ist ein Full-Stack-Framework, das sowohl Client- als auch Server-Komponenten bietet. Auf der Client-Seite gibt es Client-Komponenten, während auf der Server-Seite Server-Komponenten, Server-Aktionen und Route-Handler existieren, die traditionelle API-Routen umfassen.

Was sind die Vorteile von Server-Komponenten in Next.js?

Server-Komponenten in Next.js ermöglichen die Durchführung von traditionellen Server-Seiten-Aufgaben wie Datenbankzugriff und das Empfangen von Webhooks. Sie können auch für die Server-seitige Renderung (SSR) von Seiten genutzt werden.

Welche Art von Projekten könnten von Next.js profitieren?

Einfache Projekte, die keine benutzerdefinierten Backend-Server erfordern, profitieren von Next.js, da es die meisten Server-Seiten-Aufgaben abdeckt. Jedoch für größere, komplexere Projekte ist oft ein separates, benutzerdefiniertes Backend erforderlich.

Was sind die Einschränkungen von Next.js-Serverless-Funktionen?

Next.js-Serverless-Funktionen haben Einschränkungen wie z.B. die maximale Ausführungszeit von Aufgaben, die auf bestimmten Plänen des Hostingdienstes begrenzt sein kann, sowie die Nicht-Unterstützung bestimmter Aufgaben wie z.B. lang andauernder Aufgaben oder Web Scraping.

Welche Probleme kann die Verwendung von Serverless-Funktionen bei der Datenbankverbindung verursachen?

Serverless-Funktionen können Probleme mit der Datenbankverbindung verursachen, da viele Verbindungen gleichzeitig hergestellt werden können, was eine Verwaltung der Verbindungspool erfordert. Des Weiteren können Cold Starts zu Verzögerungen führen.

Weshalb könnte die Verwendung eines separaten Servers neben Next.js notwendig sein?

Ein separates Server kann notwendig sein, um bestimmte Aufgaben wie Video-Rendering, Web Scraping oder Cron-Jobs auszuführen, die nicht ideal für die Next.js-Backend-Umgebung geeignet sind. Außerdem bietet dies Flexibilität bei der Wahl der Technologie und Trennung von Concerns.

Was sind die Vorteile eines benutzerdefinierten Servers im Vergleich zu Next.js?

Ein benutzerdefinierter Server ermöglicht es, die beste Technologie für die jeweilige Aufgabe auszuwählen, unabhängig von der Verwendung von JavaScript oder TypeScript in Next.js. Zudem kann ein Fehler im benutzerdefinierten Server nur diesen isoliert betreffen, nicht die gesamte Anwendung.

Wie kann man Next.js und einen benutzerdefinierten Server für die Authentifizierung verbinden?

Mit Authentifizierungsdiensten wie Auth0 kann man Token von Next.js für den Zugriff auf benutzerdefinierte Server routen. Diese Token müssen auf dem benutzerdefinierten Server validiert werden, um sicherzustellen, dass nur authentifizierte Anfragen durchgeführt werden.

Was sind die Vorteile der Verwendung von Auth0 für die Authentifizierung in Next.js und benutzerdefinierten Servern?

Auth0 bietet eine einfache und sichere Authentifizierungslösung, die bis zu 10.500 monatlich aktive Benutzer kostenlos unterstützt. Es ermöglicht die Erstellung und Verwendung von JWTs (JSON Web Tokens) für die Authentifizierung von Anfragen an Next.js und benutzerdefinierte Server.

Wie wird die Audience-Claim in JWTs zur sicheren Kommunikation zwischen Next.js und benutzerdefinierten Servern verwendet?

Die Audience-Claim in JWTs wird genutzt, um sicherzustellen, dass ein Token nur für diejenige API oder den Server bestimmt ist, der in der Claim angegeben ist. Dies verhindert, dass Tokens versehentlich an nicht autorisierte Endpunkte gesendet werden.

Outlines

00:00

🌐 Next.js als Full-Stack-Framework

Next.js bietet sowohl Client- als auch Server-Komponenten. Auf der Client-Seite gibt es Client-Komponenten, während auf der Server-Seite Server-Komponenten, Server-Aktionen und Route-Handler zur Verfügung stehen. Diese ermöglichen traditionelle API-Routen und ermöglichen es, Datenbankzugriffe durchzuführen, Webhooks zu verarbeiten, Zahlungen zu bearbeiten und Inhalte aus einem CMS zu aktualisieren. Server-Side Rendering (SSR) ist ebenfalls möglich. Trotz dieser Funktionen kann es für komplexe Projekte erforderlich sein, einen separaten, benutzerdefinierten Server zu verwenden, um die Funktionalität weiter auszubauen und bestehende Server-Infrastrukturen zu integrieren.

05:01

🔌 Eingebettete Server-Funktionen und ihre Grenzen

Next.js kann als traditioneller API-Server mit Route-Handlern genutzt werden, doch wenn es auf Plattformen wie Vercel bereitgestellt wird, werden Seiten vorgeneriert und statische Assets wie HTML-Dateien erstellt. Dynamische Berechnungen werden serverlos hinter den Kulissen abgebildet. Dies hat den Nachteil, dass sogenannte Serverless-Funktionen nur während der Nutzung bezahlt werden, was zu Kosten führen kann, auch wenn keine Anfragen vorliegen. Serverless-Funktionen haben auch Einschränkungen, wie z.B. eine maximale Ausführungszeit von Aufgaben, die nicht unbedingt auf diese Funktionen übertragen werden können, wie zum Beispiel Video-Rendering oder Web-Scraping. Des Weiteren können Probleme bei Datenbankverbindungen und Cold-Starts auftreten, da diese Funktionen nicht dauerhaft aktiv sind.

10:02

🛠️ Die Notwendigkeit eines benutzerdefinierten Servers

In der Praxis kann es erforderlich sein, einen benutzerdefinierten Server neben der Next.js-Anwendung zu haben, um bestimmte Aufgaben auszuführen, die nicht auf der Server-Seite von Next.js möglich sind. Beispielsweise kann ein separates Node.js-Server für Video-Rendering oder Web-Scraping verwendet werden. Auch Chron-Jobs oder Job-Queues können besser in einem separaten Server umgesetzt werden. Zudem bietet die Verwendung eines benutzerdefinierten Servers die Flexibilität, die beste Technologie für die jeweilige Aufgabe auszuwählen, anstatt auf JavaScript oder TypeScript zu beschränken.

15:04

🔒 Authentifizierung in einer Next.js- und benutzerdefinierten Server-Architektur

Die Authentifizierung ist ein wichtiger Aspekt bei der Integration eines benutzerdefinierten Servers in eine Next.js-Anwendung. Es ist notwendig, sicherzustellen, dass sowohl Anfragen von der Next.js-Anwendung als auch direkt von der Client-Seite aus auf den benutzerdefinierten Server gesendete Anfragen authentifiziert sind. Die Verwendung von Authentifizierungs-Token ist hierfür essentiell. Das Video skizziert, wie man mit Hilfe von Kind, einer Authentifizierungs-Plattform, die Authentifizierung für Next.js und einen benutzerdefinierten Express-API-Server einrichtet, wobei die Tokens für die Kommunikation zwischen den beiden Servern verwendet werden.

20:05

🔗 Verknüpfung von Next.js mit benutzerdefiniertem Server und Authentifizierung

Das Video demonstriert, wie man eine Next.js-Anwendung mit einem benutzerdefinierten Express-API-Server verknüpft und die Authentifizierung zwischen beiden sicherstellt. Dies geschieht durch die Verwendung von Kind, einer Authentifizierungs-Plattform, die sowohl für die Next.js-Anwendung als auch für den benutzerdefinierten Server verwendet wird. Die Tokens, die von Kind generiert werden, ermöglichen die sichere Kommunikation zwischen den beiden Servern. Zusätzlich wird gezeigt, wie man die Authentifizierung auf Client-Seite und Server-Seite in Next.js implementiert, um auf geschützte Routen zuzugreifen.

🏢 Mikroservices-Architektur und unabhängige Bereitstellung

Das Video diskutiert die Vorteile einer Mikroservices-Architektur im Kontext von Next.js und benutzerdefinierten Servern. Es wird betont, dass separate Server unabhängig voneinander bereitgestellt werden können, was Flexibilität bei der Entwicklung und Wartung bietet. Dies ermöglicht auch die Zusammenarbeit mehrerer Teams an verschiedenen Teilen der Anwendung. Die Authentifizierung bleibt dabei ein zentrales Thema, da sie für den sicheren Datenaustausch zwischen den verschiedenen Diensten erforderlich ist.

🔄 Implementierung von Authentifizierung auf Client- und Server-Seite

Das Video zeigt, wie man die Authentifizierung auf Client- und Server-Seite in einer Next.js-Anwendung implementiert. Es wird gezeigt, wie man mit Hilfe von Kind Tokens für die Authentifizierung verwendet und wie man diese in Server-Komponenten und Client-Komponenten überträgt. Die Verwendung von Middleware zur Überprüfung von Tokens auf dem benutzerdefinierten Server wird ebenso behandelt, um sicherzustellen, dass nur authentifizierte Anfragen auf geschützte Ressourcen zugreifen können.

🔒 Zusätzliche Sicherheitsmaßnahmen durch Audience-Claim

Das Video erläutert, wie man die Sicherheit der Authentifizierung durch die Verwendung von Audience-Claims erhöht. Hierbei wird sichergestellt, dass Tokens nur für bestimmte APIs oder Dienste gültig sind. Dies wird durch die Registrierung von APIs in der Kind-Plattform und die Überprüfung der Audience-Claims in den Middleware-Funktionen auf dem benutzerdefinierten Server erreicht.

👋 Schlussfolgerung und Dankesagung

Das Video schließt mit einer Zusammenfassung der Vorteile einer solchen Architektur und der Bedeutung der Authentifizierung. Es wird betont, wie wichtig es ist, die Authentifizierung richtig zu implementieren, um eine sichere Kommunikation zwischen verschiedenen Diensten zu gewährleisten. Der Sprecher bedankt sich für die Aufmerksamkeit des Zuschauers und teilt mit, dass er als Brand Ambassador für Kind tätig ist, was seine positive Einstellung zur Verwendung dieser Plattform erklärt.

Keywords

💡Next.js

Next.js ist ein vollständiges Stakk-Framework, das sowohl für die Client- als auch für die Server-Seite verwendet werden kann. Im Video wird Next.js als Grundlage für die Entwicklung einer Webanwendung beschrieben, die sowohl Client- als auch Serverkomponenten umfasst. Es wird verwendet, um eine Vielzahl von Aufgaben auf der Server-Seite auszuführen, einschließlich des Zugriffs auf Datenbanken und der Verarbeitung von Webhooks.

💡Server-Komponenten

Server-Komponenten in Next.js sind eine Möglichkeit, Code auf dem Server zu rendern, bevor er an den Client gesendet wird. Im Kontext des Videos werden sie als Teil der Server-Seite von Next.js genannt, die für die Durchführung traditioneller Server-Seitenaufgaben verantwortlich ist, wie zum Beispiel der Interaktion mit Datenbanken.

💡Server-Aktionen

Server-Aktionen in Next.js ermöglichen es, Code auf dem Server auszuführen, der reagiert auf bestimmte Ereignisse oder Anfragen. Sie werden im Video als Mechanismus vorgestellt, um Aufgaben auf der Server-Seite von Next.js durchzuführen, die normalerweise für die Verarbeitung von Daten oder die Reaktion auf Anfragen erforderlich sind.

💡Route-Handler

Route-Handler sind in Next.js verwendet, um API-Routen zu definieren, die auf Anfragen reagieren. Im Video werden sie als traditionelle API-Routen beschrieben, die für die Verarbeitung von Anfragen und die Interaktion mit externen Systemen, wie zum Beispiel CMS oder Zahlungssystemen, verwendet werden.

💡Serverless-Funktionen

Serverless-Funktionen sind in Next.js hinter den Kulissen verwendet, um Seiten vorzubereiten und dynamisch zu rendern. Im Video wird darauf hingewiesen, dass Next.js in der Lage ist, statische Assets wie HTML-Dateien bereitzustellen und dynamisch compute-intensive Aufgaben auf Serverless-Funktionen zu mappen, was Kosteneffizienz und Skalierbarkeit bietet, jedoch auch Einschränkungen wie die maximale Ausführungszeit einer Funktion hat.

💡Custom Server

Ein Custom Server ist ein benutzerdefinierter Server, der neben Next.js verwendet werden kann, um Anforderungen zu erfüllen, die innerhalb von Next.js nicht möglich sind. Im Video wird die Notwendigkeit eines Custom Servers für Projekte diskutiert, die bestimmte Anforderungen haben, die Next.js nicht erfüllen kann, wie zum Beispiel die Verarbeitung von lang andauernden Aufgaben.

💡Microservices-Architektur

Die Microservices-Architektur ist ein Ansatz, bei dem eine Anwendung in kleine, unabhängige Dienste unterteilt wird, die sich gegenseitig über Netzwerke kommunizieren. Im Video wird die Vorstellung eines Custom Servers als Teil einer Microservices-Architektur vorgestellt, um die Flexibilität und Skalierbarkeit einer Anwendung zu erhöhen.

💡Authentication

Authentication ist der Prozess, bei dem die Identität eines Benutzers überprüft wird. Im Video wird die Implementierung von Authentifizierungsmechanismen in Next.js und Custom Server-Umgebungen diskutiert, um sicherzustellen, dass nur autorisierte Benutzer auf geschützte Ressourcen zugreifen können.

💡JSON Web Tokens (JWT)

JSON Web Tokens sind ein Standard, der verwendet wird, um Informationen zwischen Parteien sicher zu übermitteln. Im Video werden JWTs als Mittel zur Authentifizierung von Anfragen an den Custom Server beschrieben, indem sie in den HTTP-Headern übermittelt werden und auf dem Server überprüft werden.

💡KIND

KIND ist eine Authentifizierungslösung, die im Video verwendet wird, um Authentifizierung für Next.js-Anwendungen und Custom Server zu verwalten. KIND bietet SDKs für verschiedene Anwendungstypen und wird im Video als einfache Lösung für die Verwaltung von Authentifizierungsprozessen und Tokens präsentiert.

Highlights

Next.js ist ein Full-Stack-Framework, das sowohl Client- als auch Server-Komponenten bietet.

Server-seitige Funktionen umfassen Server-Aktionen und Route-Handler für traditionelle API-Routen.

Mit Next.js können traditionelle Server-Aufgaben durchgeführt und auf Datenbanken zugegriffen werden.

Für komplexe Projekte wird oft ein separates, benutzerdefiniertes Backend benötigt.

Next.js kann als traditioneller API-Server mit Route-Handlern genutzt werden, einschließlich SSR für Seiten.

Einige Aufgaben sind auf der Server-Seite von Next.js nicht durchführbar, insbesondere bei Verwendung von Serverless-Funktionen.

Serverless-Funktionen haben Vor- und Nachteile, einschließlich Timeouts für laufende Aufgaben und Kosten für未使用的 Ressourcen.

Längere Aufgaben wie Video-Rendering können aufgrund von Timeout-Einschränkungen nicht auf Next.js-Backends durchgeführt werden.

Für Hintergrundaufgaben oder Cron-Jobs kann ein separates Server besser geeignet sein als ein Next.js-Backend.

Serverless-Funktionen haben Einschränkungen hinsichtlich des Zugriffs auf einen persistenten Dateisystem.

WebSockets können in Next.js-Backends nicht ohne Weiteres implementiert werden.

Das Hosten von Next.js auf einem lang andauernden Server kann Komplexität verlieren, aber bestimmte Anwendungsfälle erfüllen.

Ein benutzerdefiniertes Server kann die Wahl der besten Tools für die spezifischen Anforderungen eines Projekts ermöglichen.

Ein separates Server ermöglicht die Isolation von Fehlern und unabhängige Bereitstellung von Komponenten.

Mehrere Teams können auf einem Projekt mit separaten benutzerdefinierten Servern unabhängig arbeiten.

Authentifizierung kann in einer Next.js-Anwendung mit Hilfe von Kind, einer Authentifizierungs-Plattform, implementiert werden.

Kind bietet SDKs für Next.js und benutzerdefinierte Server, um Authentifizierung und geschützte API-Routen zu verwalten.

Geschützte API-Routen können mit Middleware von Kind, die Json Web Tokens verifiziert, gesichert werden.

Die Verwendung von Audience-Claims in Json Web Tokens ermöglicht es, Tokens für bestimmte APIs einzuschränken.

Transcripts

next JS is a full stack framework so we

get both a client side as well as a

server side so on the client we have

client components and on the server side

we have server components these days

server actions as well as route handlers

these are basically your traditional API

routes and with any of these three

options that you have on the server side

you can do the traditional server side

tasks you can access your database and

any of these you can receive web hooks

with these route handlers so you can

process payments update your content

from your CMS you can even use next Js

just as your traditional API server with

these route handlers you can also SSR

your pages Etc so it covers most of the

things that you would want to do on the

server side and if you have a simple

project that's probably enough but I

found that in the real world if you're

building a serious project pretty much

always at some point you need a separate

server a custom back end and in fact you

may actually already have a custom

server and you're thinking about moving

to nextjs but you don't want to leave

your already existing server behind you

want to keep it that way and so you may

have an architecture like this where you

have your nextjs app which is basically

this entire party is one next s app and

then also a custom Ser maybe an Express

API maybe PHP Ruby go python pick your

flavor but even if you don't have a

custom server yet you may still want

that in fact you may need it at some

point because some of the things you

simply cannot do on the server side of a

nextjs application because when you

deploy it to for sale for example what

you get is essentially a bunch of

serverless functions behind the scenes

right so your pages will be

pre-generated as much as possible so you

get a bunch of static assets like HTML

files but anything that requires Dynamic

compute will be mapped behind the scenes

for you on forel to a serverless

function and that's different from your

traditional server which is what people

call a long running server so this one

will be running even if there are no

requests it's still running and that's

the downside of them you're paying even

if you're not using them but serverless

functions you're only paying for what

you use and there are other benefits as

well but there are also downsides with

these serverless functions for example

any task May simply not be able to run

on a serverless functions so for example

if you deploy to forel and you are on

the hobby plan a free plan you can

actually only run task take at most 10

seconds so if it takes longer you'll get

a timeout error now if you upgrade to

the Pro Plan by default it's going to be

15 seconds but you can actually maximize

this all the way to 5 minutes which is

already substantially more than what it

used to be but there will still be some

tasks that are going to be too long for

that for example I was actually building

a startup which was rendering videos I

was using the remotion library that

allows you to create videos with react

so what this will do is it will stitch

together the video but it may take some

time may take you know if it's a longer

video may take 20 30 minutes so I cannot

run that on the nextjs back end I need

to do that on a separate back end so I

created a separate nodejs server for

that and there are other tasks as well

like web scraping that may simply take

too long also if you have background

tasks or like a a job queue or Chron

jobs this may not fit properly within a

next next as backend this may be more

appropriate to spin out into a separate

server as well also the way that

serverless functions work is you

essentially spin up a lot of them as

more and more requests are coming in and

they all will make a connection to the

database in case you're accessing the

database so you may actually also run

into issues databased connections to

many of them you need to manage the pool

of connections they also suffer from

cold starts because you're only paying

for what you use so as you don't use

them they're not going to be up and

running that means that once you do

start getting requests again may take

some time before they're up and running

and it could be a little bit slower in

the beginning now it's not a huge

problem it affects a small percentage of

the total amount of request but still

something you may run into you also

don't have a persistent file system so

these serverless functions they don't

share the same file system so that means

if you're using SQL light for example

which is essentially just a file it's

part of your file system you cannot use

that when you deploy it to forell or if

you're just using a Json file to manage

data that's not going to work and there

are other things as well like websockets

that may not really work out of the box

in a nextjs back end now some of these

things can be worked around but it's

just not ideal to put this in a nextjs

backend you can technically also host

nextjs yourself so you can actually also

run it on a long running server it does

have more complexity and you may lose

some features that could be an option

that solves it for your particular use

case but most of you will just simply

want to have a separate custom server

because there are other benefits to that

as well for example if you have a custom

server you can pick the best tool for

the the job so if you have a project

that has a lot of machine learning or AI

or data processing you may want to use

Python because python is more popular

for data science type of work or maybe

you want to use go for performance or

maybe your developers simply have

expertise in a different technology so

why not use that expertise you can pick

any technology you want for this

separate server with nextjs you have to

use JavaScript or typescript also what

if I make a mistake in one of my backend

features harm the entire app in nextjs

but a custom server if I make a mistake

there well it's just it's isolated to

just that service we can also deploy

this independently of the rest of the

application with nextjs if you make a

change in a server action or in a server

component or route Handler you have to

redeploy the entire app imagine you

actually have separate teams of people

working on the app you're all working in

the same app whereas with a custom

server you can actually have multiple

custom servers and each team could be

working on one of them so you get all of

these benefit right so I should also put

here this is simply a more ergonomic

setup I think if you have different

teams working on the same project now if

you have a background in microservices

you probably recognize all of this I'm

essentially rediscovering the benefits

of having a microservices architecture

now you may just want to have one custom

server next to your nextjs application

and you can still deploy this to for

sale by the way so you can also deploy

node.js or Express API to for sale now

the biggest problem you're going to run

into I found was authentication actually

so there are solutions to add

authentication to the nextjs application

but how does that work if you also want

to have let's say a separate API server

and those API routes also need to be

protected so what we want is that if we

make a request from our nextjs server

site to our custom server we need to be

authenticated So This Server site will

need to send some token let's say to our

custom server custom server can then

verify that the token is valid and we

may actually also want to send requests

directly from the client side to the

custom server as well which then also

should have a valid access token and

what we of course also want is simply

within our nextjs app our nextjs server

sign may actually also do things like

access the database and that of course

should also be authenticated so here of

course also the client when it sends

requests to the back end we also want to

make sure that only authenticated users

can do that so I'll quickly show you how

to do that I'm going to use kind I'm a

brand ambassador for kind they have a

wonderful solution for authentication

and it's free up to 10.5k monthly active

user so we have two things here we have

the entire nextjs application we can use

the nextjs app router SDK by kind and

then we have let's say a separate Xpress

API server now K actually also has an

SDK for that but we only need the app

router SDK to create a token and so on

and then we can reuse that token to make

authenticated requests to our separate

server so we don't need both sdks we

only need one now I like using the

nextjs app router SDK because it also

helps us with some utilities on the the

client now just to show you how you

could set that up in a folder structure

right so here I have an API folder where

I put my Express API server so all of

the express API server stuff goes in

here then I have a web folder for my

entire nextjs app right so my entire

nextjs app just as you would normally

use it is all in here and then you can

also have a shared folder right so if we

have a database here of course my nextjs

server site needs to access the database

but my custom server may also need to

update the database right so here in the

shared folder you may have some database

related things that you can use in both

your custom server as well as in your

nextjs application so let me show you

the nextjs application as it is right

now so here is my nextjs application you

can see it's just a pretty standard

boiler plate here if I open up the

source and if I go to my homepage here I

just have this sample app welcome to

stock prices and here is what you would

see this is the homepage welcome to

stock prices log in to VI stock prices

and new so let's say we have a dashboard

route that should actually be protected

where you can view the stock prices and

the news right now if I go to/ dashboard

I can just go there I'm not

authenticated we have zero

authentication right now and that's this

page here under dashboard you can see

here I have my dashboard page and this

is the home page this should be public

but this should be private so this is

all just nextjs right so if we go back

to the diagram here what we're doing

here is we just have two pages those are

actually server components in xjs so

those two pages are just here so what we

want to do is just protect this first so

we we can just use this one app router

SDK so in the dashboard I can register

my application here with kind I can call

that stock prices now next JS is

actually considered here a backend web

application and then here we have a

quick start I will just pick nextjs of

course all right now we already created

an App so it's existing codebase where

is your project running so this is

something you need to pay attention to

if you have multiple apps running if you

would run your Express server let's say

on Local Host 3000 then your next GS app

is probably running on some other server

I am actually running this on Local Host

3,000 I need to set these call back URLs

boom boom I need to install this package

I already did that I need to add my

environment variables right so here in

my nextjs application I have .lo I'm

going to paste that right here all right

let's see all right now within nextjs we

also have these route handlers right so

your API routes essentially this is all

just within nextjs has nothing to do

with our custom server we do need to add

that here as well so I will copy this

path and then here I can create a new

folder and then in there we need route.

JS and I will just copy this and paste

that right here right this is just a

bunch of setup all for our nextjs

application okay and that should

basically be it now we can add sign up

and sign in buttons so here what we want

to do of course is we want to protect

this page the user needs to be signed in

so let's actually try protecting this

before we add sign in and login buttons

so if I go to the dashboard page this is

a server component in kind if we want to

protect this we can do it right in the

server component or we can create a

middleware file right middleware also

only runs within our nextjs application

has nothing to do with our separate

custom server so they also show you how

to do this with middleware so you can

easily protect many different pages in

one go so in next this is all all within

next JS right so here I would create a

middleware dots file and then here I can

determine which pages should be

protected so here we only want to

protect the dashboard page we could do

it manually for each page as well with

get kind server session I have a

complete tutorial on kind so check that

out so here middle where right now I'm

just protecting dashboard so if I do

this I'm not logged in so you can see

actually automatically when I try to go

there we actually already have a

redirect there so if I go to the

homepage this is still public if I try

to go to dashboard we should be

redirected to the login page hosted by

kind now it will say something about not

being able to authenticate because we

haven't decided yet how the user should

be able to authenticate so if we go to

our application here we can decide how

the user should be able to log in maybe

with their password passwordless with

their phone I'm going to use GitHub here

and I will save that right here all

right successfully saved if I just try

accessing dashboard now again I'm not

logged in so automatically I will be

redirected to the login page and now I

can log in with GitHub I haven't created

an account yet so it will prompt me to

create an account and now after logging

in with GitHub I'm redirected here to

dashboard so now I'm logged in and you

can see indeed I have my access token

here now this is all within nextjs now

of course we want to make these requests

to our custom server which is also going

to be protected and we need to send

along this access token to there so we

have now protected our nextjs

application there are there are many

other things we can do here but you can

see now when I want to access a

particular page that should be protected

which is just a server component

actually in nextjs and when I try to go

there without being logged in I'm

automatically redirected to kind and

after login I can actually access that

pit so now we have set up authentication

for our nextjs application but now what

if we have a custom server let's take a

look there I'm going to close out of

this I'm going to close the web folder

here let's say we have an Express API

server and in here here we have well

let's see we have a setup for very

simple Express server and so course is

of course one of the things you want to

take a look at I'm just going to allow

everything here and but here we have an

API route and here we have API protected

and let's say this holds some protected

stock prices data how do we make sure

that only logged in users can access

this API route or at least get back a

response with this only when they're

logged in so what we're going to do is

we're going to make a request from our

nextjs server back end to our API route

here and then we'll also try to do it

directly from the client as well let's

try doing this let's try making a

request somewhere from our nextjs back

end to our API server here so let's see

let's go to our nextjs application as

well our dashboard page is a server

component right so this is server site

right so if we look at the diagram one

more time that's a server component

that's running within the nextjs server

site now from here we're going to make a

request to that APN R so in the server

component if you watch my channel you

know that we can do async A8 directly in

here without using effect I can make a

fetch call directly in the function body

here right and we get a response from

that so my nexts application is running

on Local Host 3000 but the API is

running on 3001 and the route to there

was API protected so this hopefully

gives us some response and let's

actually try logging that so console log

data and let's see what we get so here

on the left side I have my nextjs app

running on the right side I have my

Express API running remember this is a

server component so if you log something

you need to open up your ter Al it's not

going to be in the browser tools that's

client component and actually you can

already see I get a message here this is

protected stock prices data now how is

that possible because I'm not passing

along any token so right now this is not

protected this API route here is just

sending this back to whoever makes this

request so if we want to protect this

API route we can very easily do that

with kind as well so kind actually also

gives you a Json web token fifier that

you can use here as middleware I can

actually just import this from kind's

other packet which is called kind note

Express the only thing we need from here

is actually just this utility they have

to verify Json web tokens so here I can

then create the middleware we use the

imported Json web token verify and here

you need to give the domain that you

used with kind so this is going to be

something like this it's kind's domain

but it's going to be your own name in

the as the subdomain here now there is

something called the audience claim as

well that we want to verify and we'll

talk about it in a second for now I will

just leave this empty this middleware

when there is a request coming into this

route it will go through the middleware

first and it will pull out the request

headers and specifically it's going to

look for a bearer token you can do that

manually as well right so you would do

something like request headers

authorization and you can grab you can

grab the beer token from the incoming

request like this yourself and then

verify it yourself however here it's a

bit easier it will do all of that for

you you just plop it in there so now

when I try to access that API route like

this from our own nextjs server let's

see what happens I just need to invoke

this and again let's go to our dashboard

page so that it will run again now if

you keep making request it may seem that

you can still access the API route even

though we are not passing along the

access token so how is that possible

well actually it is not possible nextjs

actually caches This Server component so

if you invoke it again it may actually

use a cache from before so that's why we

get the same results here so what I like

to do is sometimes you kind of have to

delete this next folder here so if I

delete this and if I just restart the

server here the nextjs server now it's

restarted if I now invoke This Server

component again if I refresh here let's

see what we get see so yeah so now you

can see we indeed get something here

with forbidden and actually here in our

Express server we also see something

here so here you can see Json web token

parse error empty Json web token so

we're not passing along any Json web

token and so what this middleware will

do it will return a response saying for

a one error forbidden right so that's

why now we're getting this error here so

now we have protection in place here on

our custom server you need to f a token

now right so now when we make a request

here and we don't have that we get that

error so now of course we want to send

that along right so and actually my

co-pilot wants to get it from local

storage which is not possible because

this is a server component there is no

local storage but how do we get the

access token here then well on the

server side anywhere on the server with

kind you can use get kind server session

so this allows you to get the excess

token on the server side all right and

actually I just need to add the at in

front of it so here we get all sorts of

things now what we want is to get the

access token but we don't want it in

decoded format because we want to send

this along so here we want to get the

raw access token so then here we get the

access token we now that's a function so

we do need to call that to get the

actual token get access token raw so

then here we get the actual access token

which we can then pass along right so

here we just plop this in there now if I

save here now we are passing along the

access token to our server and let's

actually try logging the access token to

double check that we actually get an

access token here I will comment out the

actual fetch call for now so here of

course we need to await this so This is

actually a promise and if we do that and

now save you can see we are indeed

getting this raw access token right so

here you can see it's not decoded that's

what we need to pass along the API

server right so now I'm passing this

along as the access token here and now

you can see it says something about this

is protected stock prices data so now if

I go down here on the express server as

well you can see we get a message here

token is valid so now we have

successfully made a request from our own

nextjs backend to a custom server which

is still protected all right so now what

do we want to make a request directly

from a client component to this custom

server well it would be very similar so

let's actually turn this into a client

component we can do that by just adding

use client typically not recommended for

the entire page of course but let's see

if we can change this a little bit to so

this is not going to work so get kind

server session that's all for Server

sites whether it's server component

server action route Handler that doesn't

work on the client side so we can also

not make this async so what we can use

on the client side is use kind browser

which gives us similar things here on

the client so here we get access to all

of this right so we have all of these

properties here now what we want is

again get access token not the decoded

one the raw one because that's what we

want to send along just to quickly log

this to the console now we actually need

to take a look in the browser so if I

refresh here let's see we see access

token raw and here you can see now we

have our access token on the clock now

if we make a fetch call to our API

server let's say we're doing some old

school fetching with use effect well you

would end up with something like this so

here you have you would create a

function get data so here we would make

a fetch call again to same route we pass

along the token as part of the

authorization header and we will log the

actual response so if I save here and

now if I scroll up a bit Yeah you can

see here I get message this is protected

stock prices data so we got a valid

response here and indeed here we also

see here from the Express server that

the token was valid so we use the nextjs

SDK it will give us a token and then we

can just pass along the token to our

custom server which is protected with

middleware that's also coming from kind

now there's one more thing that we can

do to make it safer which is to also

work with the audience claim because

it's just checking if the token is valid

right so when we log in with the next

chance SDK it will give us some token

but can we just use that token

everywhere well no we want the token to

only work for this specific custom

server so you can use the audience claim

for that so in kind I can go to settings

and all the way here at the bottom

there's API so you can register your

apis with kind and actually I already

did this so typically in a Json web

token you would then see the audience

claim typically it's a URL but it's not

going to be called or anything but it's

just typically a URL since my Express

server is running on Local Host 3001

that's what I would use to make it work

with the audience claim we do need to

add this environment variable here so it

needs to be the exact same as how you

registered is in your Cent dashboard so

this token that's going to be created is

going to be meant to be consumed by our

API server which is locally at least

running on Local Host 3001 and then I

want to connect this API to this

application nextjs application I have

here so very easy to do just one click

boom now the separate custom server is

sort of connected with my nextjs

application so the next time that a

token is created in that token there

will be an audience claim so let's

actually do that let's go back to our

application here I'm going to log myself

out uh kind of course has login log out

buttons as well I have a complete

tutorial on kind like I said so here on

the dashboard page we could have a log

out and I will import that and we will

say something like log out okay so we

need to click on that so here if I make

this a little bit bigger you can see log

out if I click on that you can see my

cookies are going to become cleared on

the homepage we might as well quickly

add some login and register buttons as

well login link and there's also a

register link very easy so now here I

can click on log in to log myself in and

get a token again I'm going to log in

with GitHub again all right so now I'm

back in the dashboard page now I have a

new token and of course it's encoded

here but if we actually decode it here

decoded access token so we can see the

audience claim so if I save this here

here you can see now I have an access

token all right so now here when we log

this here I get the decoded access token

you can see in the audience claim there

is now this URL for our API server so

this token is meant for this URL that's

how you can view it so then here on the

API server here we also we have this

audience option here and we can specify

that we only want to allow tokens that

explicitly have that Local Host 3001 in

the audience claim so then here when we

make request let's see if we can still

get the data so I'm going to refresh

here and you can see I'm still getting

the data here so now this is protected

even better there may be other checks

that you want to do here like check for

the Scopes but that's a topic for

another day this was an example of how

you can set up your architecture with a

custom server next to your nextjs

application in including authentication

which is which is typically the hard

thing to do right in a setup like this

but you can see with kind that's very

easy to solve so I'm Wesley I'm a brand

ambassador for kind so they are

sponsoring me but even if they weren't I

would still use their solution for my

own nextjs applications because

authentication is just very hard to do

properly yourself especially once you

start deviating from the standard path

hopefully you found it an interesting

video thanks for watching and I hope to

see you the next one have a nice day