Ein Entwicklerportfolio ist eine Sammlung von Arbeitsproben und Projekten, die deine Fähigkeiten und Erfahrungen zeigen. Mit einem starken Portfolio hebst du dich von anderen Bewerbern ab, wenn du nach Jobs suchst. Aber nicht nur das: Ein Portfolio kann auch ein wertvolles Instrument sein, um Kontakte zu knüpfen, den Überblick über deine Erfahrungen zu behalten und dich als Fachexperte zu etablieren.
In diesem Tutorial lernst du, wie du mit Next.js ein Entwicklerportfolio erstellst und es direkt von deinem GitHub-Repository auf der Anwendungs_Hosting-Plattform von Kinsta bereitstellst, die eine kostenlose .kinsta.app-Domain bereitstellt, damit deine Arbeit schnell online gehen kann.
Hier siehst du eine Live-Demo des Entwicklerportfolios, das du mit Next.js erstellst.
Du kannst auf das GitHub-Repository dieses Projekts zugreifen, wenn du einen genaueren Blick darauf werfen möchtest, oder du kannst diese Portfolio-Starterprojekt-Vorlage verwenden, indem du Use this template > Create a new repository — dadurch wird der Starter-Code in ein neues Repository kopiert. Das Startprojekt enthält grundlegende Codes wie die Stile, einen Font Awesome CDN-Link, Bilder und die Grundstruktur.
Anforderungen/Voraussetzungen
Dies ist ein „Follow-along“-Tutorial. Es wird dir leichter fallen zu coden, wenn du folgendes hast:
- Grundkenntnisse in HTML, CSS und JavaScript.
- Ein wenig Wissen über React und vielleicht Next.js.
- Node.js und npm (Node Package Manager) oder yarn auf deinem Computer installiert sind.
Warum Next.js?
Next.js ist ein auf React basierendes Open-Source-Framework für JavaScript-Bibliotheken, das für eine Vielzahl von Webentwicklungsprojekten eingesetzt werden kann, da es die Erstellung von serverseitig gerenderten und statischen Anwendungen vereinfacht. Es rationalisiert den Prozess, indem es die besten Funktionen von React nutzt und die Rendering-Leistung für ein besseres Nutzererlebnis optimiert. Einige der häufigsten Anwendungsfälle für Next.js sind:
- Erstellung statischer Websites: Mit Next.js lassen sich statische Websites erstellen, die schnell und einfach zu implementieren sind und nur minimalen Wartungsaufwand erfordern, wie z. B. die Website für das Entwicklerportfolio, die wir im Laufe dieses Tutorials erstellen werden.
- Dynamische Websites erstellen: Mit Next.js kannst du dynamische Websites erstellen, deren Inhalt sich je nach Benutzerinteraktion oder serverseitigem Abruf von Daten ändert.
- E-Commerce-Websites erstellen: Next.js eignet sich gut für die Erstellung von E-Commerce-Websites, die ein serverseitiges Rendering zur Verbesserung von SEO und Leistung erfordern.
- Erstellung von progressiven Webanwendungen (PWAs): Next.js unterstützt die Erstellung von PWAs, das sind Webanwendungen, die wie native Apps funktionieren und auf dem Gerät des Nutzers installiert werden können.
So richtest du deine Next.js-Entwicklungsumgebung ein
Um eine Entwicklungsumgebung für Next.js einzurichten, musst du zunächst Node.js auf deinem Computer installieren, denn mit dem Befehl npx kannst du npm-Pakete ausführen, ohne sie global auf deinem System installieren zu müssen. Wenn das erledigt ist, kannst du ein Next.js-Projekt erstellen, indem du den folgenden Befehl ausführst:
npx create-next-app@latest my-portfolioEs erscheint eine Eingabeaufforderung, in der du aufgefordert wirst, einige zusätzliche Abhängigkeiten zu bestätigen. Dann kannst du npm run dev ausführen, um deine App auf localhost:3000 verfügbar zu machen.
Wenn du ein Next.js-Projekt mit dem Befehl npx erstellst, wird automatisch eine Ordnerstruktur mit den folgenden Hauptverzeichnissen angelegt:
- pages: Dieser Ordner enthält die Seiten der Anwendung, die automatisch anhand ihres Dateinamens weitergeleitet werden. Zum Beispiel wäre pages/index.js die Startseite, während pages/about.js die Info-Seite wäre.
- public: Dieser Ordner enthält statische Dateien, die direkt ausgeliefert werden können, z. B. Bilder, Schriftarten und andere Assets.
- components: Dieser Ordner ist optional und enthält wiederverwendbare UI-Komponenten, die in der gesamten Anwendung genutzt werden können.
- styles: Dieser Ordner ist ebenfalls optional und enthält globale Stile, die in der gesamten Anwendung verwendet werden können.
Je nach Konfiguration und Funktionen können noch weitere Verzeichnisse und Dateien erstellt werden, aber dies sind die wichtigsten Verzeichnisse eines Next.js-Projekts.
In diesem Tutorial wird alles, was wir bauen, auf der Index-Seite (unserer einseitigen Website) erscheinen, und du wirst Komponenten für verschiedene Bereiche wie Hero Image, das Impressum, die Projekte und andere einbauen.
Wie man ein responsives Entwicklerportfolio mit Next.js erstellt
Ein Portfolio besteht normalerweise aus Komponenten wie diesen:
- Navbar-Komponente
- Hero-Komponente
- Über-Komponente
- Skills-Komponente
- Projekte-Komponente
- Kontakt-Komponente
- Footer-Komponente
Die Komponenten Navbar und Footer sollen auf allen Seiten erscheinen, wenn das Portfolio mehr als eine Seite hat. Dies kann in Next.js durch die Definition eines Layouts erreicht werden.
Definieren von Layouts in Next.js
In Next.js ist ein Layout eine Möglichkeit, eine einheitliche Struktur für die Komponenten zu definieren, die auf jeder Seite einer Website erscheinen. Das Layout umfasst normalerweise Elemente wie eine Kopfzeile, ein Navigationsmenü und eine Fußzeile, die auf allen Seiten der Website angezeigt werden.
Beginne damit, einen Komponentenordner im src (Quell)-Verzeichnis deines Next.js-Projekts anzulegen. Als Nächstes erstellst du die Komponenten Navbar und Footer, die in der Komponente Layout verwendet werden.
Hier ist die Komponente Navbar in Navbar.jsx:
// components/Navbar.jsx
import Link from "next/link";
const Navbar = () => {
return (
<div className="nav-container">
<div className="logo">
<Link href="/">
Joe's Portfolio
</Link>
</div>
<a href="" className="cta-btn">Resume</a>
</div>
)
}
export default Navbar;Hier ist die Fußzeilenkomponente in Footer.jsx:
// components/Footer.jsx
const Footer = () => {
return (
<>
<hr/>
<div className="footer-container">
<p>
© {new Date().getFullYear()} Joel's Portfolio
</p>
<div className="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</>
)
}
export default Footer;Hinweis: Damit die Font Awesome-Symbole funktionieren, musst du entweder Font Awesome in deinem Projekt installieren oder sein CDN nutzen. Du kannst den CDN-Link wie folgt in deine _document.js-Datei einfügen:
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Hinweis: Wenn du eine andere Version von Font Awesome über das CDN verlinkst, musst du oben den entsprechenden integrity Hash für diese Version einfügen.
Nachdem du alle notwendigen Komponenten für dein Layout erstellt hast, kannst du die Layout-Komponente selbst erstellen und diese Komponente zu deinen Seiten hinzufügen, indem du deinen Seiteninhalt in sie einbettest.
Die Layout-Komponente akzeptiert einen <code>children</code> prop, mit dem du auf den Inhalt deiner Next.js-Seiten zugreifen kannst.
// components/Layout.jsx
import Navbar from './navbar';
import Footer from './footer';
const Layout = ({ children }) => {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
export default Layout;Jetzt hast du erfolgreich die Layout-Komponente erstellt, die neben der Navbar und der Fußzeile auch die children props richtig positioniert. Jetzt kannst du die Layout-Komponente zu deinen Seiten hinzufügen, indem du den Seiteninhalt darin einbettest. Das machst du in der Datei _app.js.
// pages/_app.js
import '@/styles/globals.css';
import Layout from '../components/layout';
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}Du hast nun erfolgreich ein Layout für dein Entwicklerportfolio erstellt. Für dieses Portfolio konzentrieren wir uns mehr auf Next.js und darauf, wie du deine Website auf Kinsta bereitstellst. So kannst du die Stile in der Datei styles/globals.css in dein eigenes Projekt kopieren. Wenn du deine Portfolio-Website im Dev-Modus startest, solltest du jetzt das Layout deiner App sehen.
Jetzt ist es an der Zeit, deiner Portfolio-Website den passenden Inhalt zu geben.
Portfolio-Komponenten erstellen
Du kannst nun einzelne Komponenten für jeden Bereich deines Entwicklerportfolios erstellen. Alle diese Komponenten werden in die Indexseite deines Next.js-Projekts importiert, damit sie angezeigt werden können, wenn du dein Projekt mit npm run dev startest.
Die Hero-Komponente
Die Hero-Komponente ist der erste Bereich unterhalb der Navbar, der die Aufmerksamkeit des Nutzers auf sich ziehen und ihm einen Eindruck davon vermitteln soll, worum es auf der Website oder in der Anwendung geht.
// components/Hero.jsx
import Image from "next/image";
const Hero = () => {
return (
<div className="hero-container">
<Image src='/images/profile.jpeg' className="profile-img" width={300} height={300} alt="Joe's personal headshot" />
<div className="hero-text">
<h1>Hey, I'm Joe 👋</h1>
<p>
I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing)
exceptional websites, applications, and everything in between.
</p>
<div className="social-icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
)
}
export default Hero;Im obigen Code siehst du, dass die Next.js Image Komponente anstelle des HTML img Tags verwendet wird, um das Bild einzufügen, da sie eine automatische Bildoptimierung, Größenänderung und vieles mehr ermöglicht.
In der Komponente Über siehst du auch, dass ein einfacher Absatz über den Entwickler und einige soziale Medien-Symbole von Font Awesome hinzugefügt wurden, um soziale Links hinzuzufügen.
So sollte die Hero-Komponente aussehen:
Du kannst der Hero-Komponente weitere Inhalte hinzufügen, die Stile in der Datei styles/globals.css anpassen oder sogar diesen Abschnitt auf deine eigene Weise neu gestalten.
Die Über-Komponente
Die Über-Komponente ist dafür gedacht, den Lesern oder Besuchern deines Portfolios in beliebig vielen Absätzen mehr Informationen über dich zu geben. Wenn du mehr über dich selbst erzählen möchtest, kannst du eine eigene „Über mich“-Seite erstellen und in diesem Abschnitt eine Schaltfläche einfügen, um mehr über dich zu erfahren.
// components/About.jsx
import Image from "next/image";
const About = () => {
return (
<div className="about-container">
<h2>About Me</h2>
<div className="flex-about">
<div className="about-text">
<p>
As a developer, I have always been passionate about creating elegant and effective solutions to
complex problems. I have a strong foundation in software development, with a focus on web
technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and
back-end of applications, and I am always looking for ways to optimize performance, improve user
experience, and ensure the highest level of code quality.
</p>
<p>Throughout my career, I have worked on a wide range of projects, from simple static websites to
complex enterprise-level applications. I am experienced in working with a variety of development
tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager
to learn and explore new technologies, and I am constantly seeking out opportunities to improve
my skills and knowledge.</p>
</div>
<div className="about-img">
<Image src='/images/about.jpeg' className="profile-img" width={300} height={500}/>
</div>
</div>
</div>
)
}
export default About;Der obige Code enthält zwei Absätze mit Text über den Entwickler und ein Bild des Entwicklers. So sollte der Abschnitt „Über mich“ aussehen:
Du kannst die Stile jederzeit anpassen, um weitere Bilder und vieles mehr hinzuzufügen.
Die Skills-Komponente
Die Skills-Komponente dient dazu, einige der am häufigsten verwendeten Technologien des Entwicklers oder Technologien, die der Entwickler in der Vergangenheit verwendet hat, zu zeigen.
Du kannst sie einfacher pflegen, indem du ein Array in einer externen Datei erstellst und dann in die Kompetenzkomponente importierst, so dass du eine Schleife durchlaufen kannst, anstatt ähnlichen Code zu duplizieren.
// components/Skills.jsx
const Skills = () => {
return (
<div className="skills-container">
<h2>Skills</h2>
<div className="grid-skills">
<div className="skill-card html">
<i className="fa-brands fa-html5 html-icon"></i>
<p>HTML</p>
</div>
<div className="skill-card css">
<i className="fa-brands fa-css3-alt css-icon"></i>
<p>CSS</p>
</div>
<div className="skill-card js">
<i className="fa-brands fa-js-square js-icon"></i>
<p>JavaScript</p>
</div>
<div className="skill-card react">
<i className="fa-brands fa-react react-icon"></i>
<p>React</p>
</div>
<div className="skill-card node">
<i className="fa-brands fa-node-js node-icon"></i>
<p>Node</p>
</div>
<div className="skill-card python">
<i className="fa-brands fa-python python-icon"></i>
<p>Python</p>
</div>
</div>
</div>
)
}
export default Skills;Im obigen Code wird für jede Fertigkeit eine Karte erstellt, und jede Karte enthält das Technologiesymbol von font-awesome und den Namen der Technologie. Du kannst auch weitere Stile hinzufügen und den Code anpassen, um ihn attraktiver und einzigartiger zu machen.
Die Projektkomponente
Die Projektkomponente ist einer der wichtigsten Abschnitte im Portfolio eines Entwicklers. Projekte sind ein konkreter Beweis für die Fähigkeiten und Fertigkeiten eines Entwicklers und zeigen, dass er sein Wissen auf reale Probleme anwenden kann.
Jedes Projekt enthält eine kurze Beschreibung des Projekts, einen Link zum Quellcode (wir verwenden hier GitHub-Links) und alle anderen Details, die du hinzufügen möchtest.
Du kannst ein Array erstellen, das die Details zu jedem Projekt enthält, und es dann in deine Komponente importieren, damit du sie nicht fest eintippen musst.
Erstellen wir eine data.js-Datei, um das Array mit den Projektdaten zu speichern. Du kannst diese Datei im Komponentenordner oder im Ordner pages/api ablegen. Für diese Demo werde ich sie im Komponentenordner speichern. In diesem Array wird ein Objekt für jedes Projekt gespeichert, das den Projektnamen, die Beschreibung und den GitHub-Link enthält.
// components/data.js
export const projectData = [
{
id: 1,
title: 'Todo List App',
description:
'A simple Todo List App built with JavaScript. All datas are stored in localstorage. It helps users check list out their plans and tick as they do them.',
gitHubLink: 'https://github.com/olawanlejoel/Todo-List-App',
},
{
id: 2,
title: 'Books Library App',
description:
'A simple Book Library App built with JavaScript. It helps readers have a good list of books they are either currently reading or have finished reading.',
gitHubLink: 'https://github.com/olawanlejoel/Book-Library',
},
{
id: 3,
title: 'Quotes Generator',
description:
'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.',
gitHubLink: 'https://github.com/olawanlejoel/random-quote-generator',
},
{
id: 4,
title: 'Password Generator',
description:
'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.',
gitHubLink: 'https://github.com/olawanlejoel/Password-Generator',
},
{
id: 5,
title: 'Twitter UI Clone',
description:
'Simple Twitter UI clone built with TailwindCSS and Vue Js. This covers only the homepage of Twitter UI. This is cool to get started with TailwindCSS as it helps understand basic concepts.',
gitHubLink: 'https://github.com/olawanlejoel/TwitterUI-clone',
},
];Du kannst nun eine Projektkomponente erstellen, die diese Daten nutzt, indem du einfach eine Schleife durchführst. Du kannst jede JavaScript-Iterationsmethode verwenden, aber für dieses Tutorial kannst du die JavaScript map() Array-Methode verwenden, um nach dem Import in die Projektkomponente eine Schleife durch das Daten-Array zu ziehen.
// components/Projects.jsx
import { projectData } from './data.js';
const Projects = () => {
return (
<div className="projects-container">
<h2>Projects</h2>
<div className="projects-grid">
{projectData && projectData.map((project) => (
<div className="project-card" key={project.id}>
<div className="project-header">
<i className="fa-regular fa-folder-open folder-icon"></i>
<div className="small-icons">
<a href={project.gitHubLink}><i className="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{project.title}</h3>
<p>{project.description}</p>
</div>
))
}
</div>
</div>
)
}
export default Projects;Im obigen Code hast du erfolgreich Wiederholungen vermieden, indem du eine Schleife durch das Array gezogen hast, um alle Projekte in der Komponente Projekte auszugeben.
Die Kontaktkomponente
Ein Grund für die Erstellung eines Entwicklerportfolios ist, dass sich potenzielle Kunden mit dir in Verbindung setzen können. Eine Möglichkeit wäre, dass sie dir eine E-Mail schicken, was wir in der Komponente Kontakt erleichtern.
// components/Contact.jsx
const Contact = () => {
return (
<div className="contact-container">
<h2>Get In Touch</h2>
<p>If you want us to work together, have any questions or want me to speak at your event, my inbox is always open. Whether I just want to say hi, I'll try my best to get back to you! Cheers!</p>
<a href="mailto:[email protected]" className='cta-btn'>Say Hello</a>
</div>
)
}
export default Contact;Füge deine E-Mail-Adresse in den a Tag ein, damit die Schaltfläche eine E-Mail-Anwendung mit einer an dich gerichteten Nachricht öffnet.
Du hast nun alle Komponenten für deine Portfolio-Anwendung erfolgreich erstellt. Der nächste Schritt besteht darin, sie zu deiner Index-Seite hinzuzufügen. Navigiere zur Datei pages/index.js – die standardmäßig erstellt wird – und ersetze ihren Code durch den folgenden.
// pages/index.js
import Hero from '@/components/Hero';
import About from '@/components/About';
import Skills from '@/components/Skills';
import Projects from '@/components/Projects';
import Contact from '@/components/Contact';
import Head from 'next/head';
const Home = () => {
return (
<>
<Head>
<title>Joel's Portfolio</title>
<meta name="description" content="Joel's Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<Hero />
<About />
<Skills />
<Projects />
<Contact />
</div>
</>
);
};
export default Home;Wenn du deine Anwendung jetzt ausführst, wirst du feststellen, dass eine vollständige Portfolio-Website erstellt wurde. Bevor du deine Anwendung bereitstellst, müssen wir noch eine Abhängigkeit installieren. Ein Vorteil von Next.js sind die vielen Funktionen, die es mitbringt, wie z. B. dateibasiertes Routing, Bildoptimierung und vieles mehr.
Die Bildoptimierung wird von der Next.js-Komponente Image übernommen. Bevor du eine Anwendung in die Produktion überführst, die die Next.js Image-Komponente verwendet, solltest du unbedingt sharp installieren. Dazu gehst du in dein Terminal, stellst sicher, dass du dich im Verzeichnis deines Projekts befindest, und führst dann den folgenden Befehl aus:
npm i sharpJetzt kannst du deine Anwendung bereitstellen, und die Images funktionieren mit der vollen Optimierung, die Next.js bietet.
Next.js-Anwendung auf Kinsta bereitstellen
Wenn du mit deinem Portfolio zufrieden bist, in dem du deine beste Entwicklungsarbeit und wichtige Informationen präsentierst, möchtest du es wahrscheinlich mit anderen teilen, oder? Wir zeigen dir, wie du das mit GitHub und der Anwendungs-Hosting-Plattform von Kinsta machen kannst.
Push deinen Code auf GitHub
Es gibt verschiedene Möglichkeiten, Codes auf GitHub zu pushen, aber für diesen Leitfaden wollen wir Git verwenden. Git ist in der Softwareentwicklung weit verbreitet, weil es eine zuverlässige und effiziente Methode ist, um Codeänderungen zu verwalten, an Projekten zusammenzuarbeiten und den Versionsverlauf zu pflegen.
Du kannst deinen Code mit den folgenden Schritten auf GitHub hochladen:
Zuerst erstellst du ein neues Repository (wie einen lokalen Ordner, in dem du deinen Code speicherst). Dazu meldest du dich in deinem GitHub-Konto an, klickst auf das + in der oberen rechten Ecke des Bildschirms und wählst aus dem Dropdown-Menü die Option Neues Repository, wie in der Abbildung unten zu sehen.
Im nächsten Schritt gibst du deinem Repository einen Namen, fügst eine Beschreibung hinzu (optional) und wählst aus, ob dein Repository öffentlich oder privat sein soll. Klicke dann auf Repository erstellen. Jetzt kannst du deinen Code in das neue GitHub-Repository pushen.
Alles, was du brauchst, um deinen Code mit Git zu pushen, ist die Repository-URL, die du auf der Hauptseite des Repositorys, unter der Schaltfläche Klonen oder Herunterladen oder in den Schritten findest, die nach der Erstellung eines Repositorys angezeigt werden.
Du kannst dich darauf vorbereiten, deinen Code zu pushen, indem du dein Terminal oder die Eingabeaufforderung öffnest und zu dem Verzeichnis navigierst, das dein Projekt enthält. Verwende den folgenden Befehl, um ein lokales Git-Repository zu initialisieren:
git initFüge deinen Code mit folgendem Befehl zum lokalen Git-Repository hinzu:
git add .Der obige Befehl fügt alle Dateien im aktuellen Verzeichnis und seinen Unterverzeichnissen zum neuen Git-Repository hinzu. Jetzt kannst du deine Änderungen mit dem folgenden Befehl übertragen:
git commit -m "my first commit"Hinweis: Du kannst „my first commit“ durch deine eigene kurze Nachricht ersetzen, in der du die Änderungen beschreibst, die du vorgenommen hast.
Zum Schluss kannst du deinen Code mit den folgenden Befehlen auf GitHub veröffentlichen:
git remote add origin [repository URL]
git push -u origin masterHinweis: Ersetze „[repository URL]“ durch die URL deines eigenen GitHub-Repositorys.
Sobald du diese Schritte abgeschlossen hast, wird dein Code auf GitHub veröffentlicht und ist über die URL deines Projektarchivs zugänglich. Jetzt kannst du dein Repository auf Kinsta bereitstellen.
Dein Portfolio auf Kinsta bereitstellen
Das Deployment auf Kinsta dauert nur wenige Minuten. Beginne im My Kinsta-Dashboard, um dich anzumelden oder dein Konto zu erstellen.
Anschließend autorisierst du Kinsta auf GitHub in diesen kurzen Schritten:
- Klicke in der linken Seitenleiste auf Anwendungen.
- Klicke auf Dienst hinzufügen.
- Klicke im Dropdown-Menü auf Anwendung, weil du eine Next.js-Anwendung auf Kinsta bereitstellen willst.
Es erscheint ein Modal, in dem du das Repository auswählen kannst, das du bereitstellen möchtest.
Wenn du mehrere Zweige in deinem Repository hast, kannst du denjenigen auswählen, den du bereitstellen möchtest. Du kannst der Anwendung auch einen Namen geben. Vergewissere dich, dass du einen Standort für das Rechenzentrum unter 25 auswählst, dann erkennt Kinsta automatisch einen Startbefehl.
Jetzt beginnt die Bereitstellung deiner Anwendung. Innerhalb weniger Minuten erhältst du einen Link, über den du auf die bereitgestellte Version deiner Anwendung zugreifen kannst. In diesem Fall lautet er: https://kinsta-developer-portfolio-ir8w8.kinsta.app/
Hinweis: Die automatische Bereitstellung wurde aktiviert, so dass Kinsta deine Anwendung automatisch neu bereitstellt, wenn du Änderungen an deiner Codebasis vornimmst und sie auf GitHub veröffentlichst.
Zusammenfassung
Es gibt mehrere Gründe, warum Entwickler/innen Next.js für ihre Webprojekte nutzen sollten. Erstens bietet Next.js von Anfang an eine optimierte Leistung mit Funktionen wie Pre-Fetching und Code-Splitting, die dazu beitragen, die Ladezeiten von Seiten zu verkürzen. Zweitens bietet Next.js eine vertraute Entwicklungsumgebung für React-Entwickler/innen und unterstützt beliebte Tools wie Styled Components und die neuesten React-Funktionen.
Kinsta bietet Unterstützung für verschiedene Deployment-Optionen für Next.js, darunter traditionelles serverbasiertes Hosting und moderne serverlose Plattformen. So können Entwickler/innen die Bereitstellungsoption wählen, die ihren Bedürfnissen am besten entspricht, und gleichzeitig von den Leistungsoptimierungen und anderen Vorteilen des Frameworks profitieren.
In diesem Tutorial hast du Schritt für Schritt gelernt, wie du eine responsive Portfolioseite mit Next.js erstellst und sie anschließend auf Kinsta bereitstellst.
Du kannst das Anwendungs-Hosting von Kinsta kostenlos ausprobieren und dich, falls es dir gefällt, für unseren Hobby-Tarif ab $7/Monat entscheiden.
Jetzt ist es an dir, dich selbst herauszufordern: Füge deiner neu entwickelten Portfolio-Website weitere Funktionen hinzu! Hier sind ein paar Ideen, um deine Kreativität anzuregen: Füge mehr Seiten mit detaillierten Informationen hinzu, integriere einen Blog mit MDX, implementiere einige Animationen. Teile deine Projekte und Erfahrungen unten in den Kommentaren!
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar