Next.js with a separate server - good idea?
Summary
TLDRDieses 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
🌐 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.
🔌 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.
🛠️ 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.
🔒 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.
🔗 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.
Mindmap
Keywords
💡Next.js
💡Server-Komponenten
💡Server-Aktionen
💡Route-Handler
💡Serverless-Funktionen
💡Custom Server
💡Microservices-Architektur
💡Authentication
💡JSON Web Tokens (JWT)
💡KIND
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
Voir Plus de Vidéos Connexes
Risikofrei von 100x Hebel profitieren? So gehts! (Bitcoin Trading Anleitung)
Compression vs Limiting vs Clipping
Shifting Cultivation/Wanderfeldbau [Erdkunde, Mittel- und Oberstufe]
Roberta Jansone on As-Built Documentation vs. Digital Twin
ELIMINARE SFILACCIAMENTI DAL GOMMONE , DEFINITIVAMENTE
Kubernetes: Eine Einführung
5.0 / 5 (0 votes)