Hier is een live demo van het developerportfolio<\/a> dat je gaat bouwen met Next.js.<\/p>\n Je hebt toegang tot de GitHub repository van dit project<\/a> als je het beter wilt bekijken, of je kunt deze portfolio starterproject<\/a> template gebruiken door Use this template<\/strong> > Create a new repository<\/strong> te selecteren – dit kopieert de startercode naar een nieuwe repository. Het starterproject bevat basiscodes zoals de stijlen, een Font Awesome CDN link, afbeeldingen en een basisstructuur.<\/p>\n Dit is een “follow-along” type tutorial. Het zal gemakkelijker voor je zijn om mee te coderen als je beschikt over:<\/p>\n Next.js<\/a> is een op React gebaseerd open source JavaScript library framework<\/a> dat gebruikt kan worden voor een breed scala aan webontwikkelingsprojecten, omdat het het bouwen van aan server-side gerenderde en statische applicaties vereenvoudigt. Het stroomlijnt het proces door de beste features van React te benutten en de renderprestaties te optimaliseren voor een betere gebruikerservaring. Een paar van de meest voorkomende use cases voor Next.js zijn:<\/p>\n Om een ontwikkelomgeving voor Next.js op te zetten, installeer je eerst\u00a0Node.js<\/a> op je computer, want je zult het commando Er verschijnt een prompt die je vraagt om enkele extra dependencies te bevestigen. Vervolgens kun je Wanneer je een Next.js project aanmaakt met het commando Andere mappen en bestanden kunnen ook worden aangemaakt, afhankelijk van de specifieke configuratie en mogelijkheden, maar dit zijn de coremappen van een basic Next.js project.<\/p>\n Voor deze tutorial zal alles wat we bouwen verschijnen op de indexpagina (onze website met \u00e9\u00e9n pagina), en je zult componenten opnemen voor verschillende secties zoals de hero, about, projecten, en overige.<\/p>\n Een portfolio bestaat meestal uit deze componenten:<\/p>\n Van de Navbar en Footer componenten wordt verwacht dat ze op alle pagina’s verschijnen als het portfolio meer dan \u00e9\u00e9n pagina heeft. Dit kan in Next.js worden bereikt door een layout te defini\u00ebren.<\/p>\n In Next.js is een layout een manier om een consistente structuur te defini\u00ebren voor de componenten die op elke pagina van een website verschijnen. De layout bevat gewoonlijk elementen als een header, navigatiemenu en footer die op alle pagina’s van de site worden weergegeven.<\/p>\n Begin met het maken van een components map in de src<\/strong> (bron) map van je Next.js project. Maak vervolgens de Navbar en Footer componenten die binnen de Layout component zullen worden gebruikt.<\/p>\n Hier zie je de Navbar component in Navbar.jsx<\/strong>:<\/p>\n Dit is de Footer component in Footer.jsx<\/strong>:<\/p>\n Opmerking<\/strong>: Om de Font Awesome pictogrammen te laten werken, moet je Font Awesome in je project installeren of het CDN ervan gebruiken. Je kunt de CDN link als volgt aan je _document.js<\/strong> bestand toevoegen:<\/p>\n Opmerking<\/strong>: Als je een andere versie van Font Awesome via het CDN koppelt, moet je boven de juiste Nadat je alle benodigde componenten voor je layout hebt gemaakt, kun je het Layout component zelf maken en dit component aan je pagina’s toevoegen door je paginacontent erin te wrappen.<\/p>\n De Layout component accepteert een <code>children<\/code> prop, waarmee je toegang hebt tot de content van je Next.js pagina’s.<\/p>\n Nu heb je met succes de Layout component gemaakt die de Navbar en Footer bevat naast de goed gepositioneerde children props. Je kunt de Layout component nu aan je pagina’s toevoegen door de paginacontent erin te wrappen. Dit gebeurt in het bestand _app.js<\/strong>.<\/p>\n Je bent er nu in geslaagd een layout te maken voor je developerportfolio. Voor dit portfolio richten we ons meer op Next.js en hoe je je website naar Kinsta kunt deployen. Je kunt dus de stijlen in het styles\/globals.css<\/a> bestand kopi\u00ebren naar je eigen project. Als je je portfoliowebsite in dev modus start, zou je nu de layout van je app moeten zien.<\/p>\n Nu is het tijd om je portfoliowebsite de juiste content te geven.<\/p>\n Je kunt nu individuele componenten maken voor elke sectie van het developerportfolio. Al deze componenten worden ge\u00efmporteerd in de indexpagina van je Next.js project, zodat ze kunnen worden weergegeven wanneer je je project start met De Hero component is de eerste sectie onder de Navbar, die vooral bedoeld is om de aandacht van de gebruiker te trekken en hem een idee te geven waar de website of applicatie over gaat.<\/p>\n In de code hierboven zie je dat de Next.js Image component<\/a> wordt gebruikt in plaats van de HTML In de About component zie je ook dat er een eenvoudige paragraaf is toegevoegd om iets over de developer te vertellen, naast enkele sociale pictogrammen van Font Awesome om sociale links toe te voegen.<\/p>\n Zo zou de Hero component eruit moeten zien:<\/p>\n Je kunt meer content aan de Hero component toevoegen, de stijlen in het styles\/globals.css<\/strong> bestand aanpassen of zelfs deze sectie op je eigen manier nabouwen.<\/p>\n De About component is bedoeld om lezers of mensen die je portfolio bezoeken meer informatie over je te vertellen in zoveel alinea’s als je wilt. Als je meer over jezelf wilt vertellen, kun je een speciale “About Me” pagina maken en daar een knop aan toevoegen om meer over jezelf te lezen.<\/p>\n De code hierboven bevat twee alinea’s tekst over de developer en een afbeelding van de developer. Zo zal de About sectie er naar verwachting uitzien:<\/p>\n Je kunt de stijlen altijd tweaken om meer afbeeldingen en nog veel meer toe te voegen.<\/p>\n Het Skills component is bedoeld om enkele van de meest gebruikte technologie\u00ebn van de developer te tonen, of technologie\u00ebn die de developer in het verleden heeft gebruikt.<\/p>\n Je kunt dit gemakkelijker onderhouden door een array te maken in een extern bestand en dan te importeren in de skills component, zodat je er doorheen kunt lopen in plaats van soortgelijke code te dupliceren.<\/p>\n In bovenstaande code wordt voor elke vaardigheid een kaart gemaakt, en elke kaart bevat het technologie icoontje van font-awesome en de technologienaam. Je kunt ook meer stijlen toevoegen en de code tweaken om hem aantrekkelijker en unieker te maken.<\/p>\n Het Projects component is een van de belangrijke onderdelen van het developerportfolio. Projecten leveren tastbaar bewijs van de vaardigheden en bekwaamheden van een developer en tonen hun vermogen om hun kennis toe te passen op echte problemen.<\/p>\n Elk project bevat een korte beschrijving van het project, een link naar de broncode (we gebruiken hier GitHub<\/a> links), en eventuele andere details die je wilt toevoegen.<\/p>\n Je kunt een array maken voor de details van elk project en die dan importeren in je component om te voorkomen dat je ze hard moet coderen.<\/p>\n Laten we een bestand data.js<\/strong> maken om de array met projectgegevens op te slaan. Je kunt dit bestand opslaan in de component map of in de pages\/api<\/strong> map. Voor deze demo sla ik het op in de componentenmap. Deze array zal een object bevatten voor elk project, en het object zal de projectnaam, beschrijving en GitHub link bevatten.<\/p>\n Je kunt nu een projectcomponent maken om deze gegevens te gebruiken door er eenvoudig doorheen te loopen. Je kunt elke JavaScript iteratiemethode gebruiken, maar voor deze tutorial gebruik je de JavaScript In de bovenstaande code heb je met succes herhaling vermeden door door de array te loopen om alle projecten in de Projects component uit te voeren, waardoor het gemakkelijk is om meer projecten te onderhouden en toe te voegen.<\/p>\n E\u00e9n reden om een developerportfolio te maken is dat potenti\u00eble klanten je kunnen bereiken. Een manier zou zijn dat mensen je een e-mail sturen, en dat is wat we in dit Contact component zullen faciliteren.<\/p>\n Plaats je e-mailadres in de tag Je hebt nu met succes alle componenten voor je portfolio applicatie gemaakt. De volgende stap is ze toe te voegen aan je indexpagina. Navigeer naar het bestand pages\/index.js<\/strong> – dat standaard wordt aangemaakt – en vervang de code ervan door het volgende.<\/p>\n Als je nu je applicatie uitvoert, zul je zien dat er een volledige portfoliowebsite<\/a> is gemaakt. Laten we tot slot, voordat je je applicatie inzet, een dependency installeren. Een voordeel van het gebruik van Next.js zijn de vele mogelijkheden die het biedt, zoals bestandsgebaseerde routing, optimalisatie van afbeeldingen, en nog veel meer.<\/p>\n Afbeeldingsoptimalisatie wordt afgehandeld met de Next.js Je kunt nu je applicatie deployen, en de images zullen goed werken met de volledige optimalisatie die Next.js biedt.<\/p>\n Als je eenmaal tevreden bent met je portfolio waarin je beste ontwikkelingswerk en belangrijke informatie te zien is, wil je het waarschijnlijk delen met anderen, toch? Laten we eens kijken hoe je dat doet met behulp van GitHub en Kinsta’s Applicatie Hosting platform.<\/p>\n Er zijn verschillende manieren om codes naar GitHub te pushen, maar laten we voor deze tutorial Git gebruiken. Git wordt veel gebruikt bij softwareontwikkeling<\/a> omdat het een betrouwbare en effici\u00ebnte manier is om codewijzigingen te beheren, samen te werken aan projecten en de versiegeschiedenis bij te houden.<\/p>\n Je kunt je code uploaden naar GitHub met behulp van de volgende stappen:<\/p>\n Maak eerst een nieuwe repository aan (net als een lokale map om je code in op te slaan). Je kunt dit doen door in te loggen op je GitHub account, te klikken op de +<\/strong> knop in de rechterbovenhoek van het scherm en New<\/strong>\u00a0repository<\/strong> te selecteren uit het dropdownmenu, zoals te zien is in de afbeelding hieronder.<\/p>\n De volgende stap is om je repository een naam te geven, een beschrijving toe te voegen (optioneel), en te selecteren of je wilt dat je repository openbaar of priv\u00e9 is. Klik dan op Create repository<\/strong>. Je kunt nu je code naar de nieuwe GitHub repository pushen<\/a>.<\/p>\n Alles wat nodig is om je code met Git te pushen is de URL van het repository, die je kunt vinden op de hoofdpagina van het repository, onder de knop Clone or download<\/strong>, of in de stappen die verschijnen na het aanmaken van een repository.<\/p>\n Je kunt je voorbereiden op het pushen van je code door je terminal of commandoprompt te openen en naar de map te navigeren die je project bevat. Gebruik het volgende commando om een lokaal Git repository te initialiseren:<\/p>\n Voeg nu je code toe aan de lokale Git repository met het volgende commando:<\/p>\n Bovenstaand commando voegt alle bestanden in de huidige map en zijn submappen toe aan de nieuwe Git repository. Je kunt nu je wijzigingen vastleggen met het volgende commando:<\/p>\n Opmerking<\/strong>: Je kunt “my first commit” vervangen door je eigen korte boodschap waarin je de wijzigingen beschrijft.<\/p>\n Tenslotte kun je je code naar GitHub pushen met de volgende commando’s:<\/p>\n Opmerking<\/strong>: Zorg ervoor dat je “[repository URL]” vervangt door de URL van je eigen GitHub repository.<\/p>\n Als je deze stappen hebt uitgevoerd, is je code naar GitHub gepushd en toegankelijk via de URL van je repository. Je kunt je repository nu deployen naar Kinsta.<\/p>\n Het deployen naar Kinsta gebeurt in slechts enkele minuten. Begin bij het My Kinsta<\/a> dashboard om in te loggen of je account aan te maken.<\/p>\n Vervolgens autoriseer je\u00a0Kinsta op GitHub<\/a> in deze snelle stappen:<\/p>\n Er verschijnt een modal waarmee je de repository kunt selecteren die je wilt deployen.<\/p>\n Als je meerdere branches in je repository hebt, kun je degene selecteren die je wilt deployen. Je kunt ook een naam toekennen aan deze applicatie. Zorg ervoor dat je een datacenterlocatie<\/a> kiest uit de beschikbare 24, en dan zal Kinsta automatisch een startcommando detecteren.<\/p>\n Op dit punt zal je applicatie beginnen te deployen. Binnen enkele minuten wordt een link gegeven om toegang te krijgen tot de uitgezette versie van je applicatie. In dit geval is dat: https:\/\/kinsta-developer-portfolio-ir8w8.kinsta.app\/<\/strong><\/p>\n Opmerking<\/strong>: Automatische deployment is ingeschakeld, dus Kinsta deployt je applicatie automatisch opnieuw wanneer je wijzigingen aanbrengt in je codebase en deze naar GitHub pusht.<\/p>\nVereisten\/voorwaarden<\/h2>\n
\n
Waarom Next.js?<\/h2>\n
\n
\n
\n
Zo zet je je Next.js ontwikkelomgeving op<\/h2>\n
npx<\/code> gebruiken om npm pakketten uit te voeren zonder ze globaal op je systeem te hoeven installeren. Als dat geregeld is, kun je nu een Next.js project aanmaken door het volgende commando uit te voeren:<\/p>\nnpx create-next-app@latest my-portfolio<\/code><\/pre>\nnpm run dev<\/code> uitvoeren om je app beschikbaar te maken op localhost:3000<\/strong>.<\/p>\n![\"Code](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/nextjs-installation-with-options.jpg\")
npx<\/code>, wordt automatisch een mappenstructuur gemaakt met de volgende hoofdmappen:<\/p>\n\n
Hoe je een responsieve developerportfolio bouwt met Next.js<\/h2>\n
\n
Layouts defini\u00ebren in Next.js<\/h3>\n
\/\/ components\/Navbar.jsx\n\nimport Link from \"next\/link\";\n\nconst Navbar = () => {\n return (\n <div className=\"nav-container\">\n <div className=\"logo\">\n <Link href=\"\/\">\n Joe's Portfolio\n <\/Link>\n <\/div>\n <a href=\"\" className=\"cta-btn\">Resume<\/a>\n <\/div>\n )\n}\n\nexport default Navbar;<\/code><\/pre>\n\/\/ components\/Footer.jsx\n\nconst Footer = () => {\n return (\n <>\n <hr\/>\n <div className=\"footer-container\">\n <p>\n © {new Date().getFullYear()} Joel's Portfolio\n <\/p>\n <div className=\"social_icons\">\n <a\n href=\"https:\/\/twitter.com\/olawanle_joel\"\n aria-label=\"Twitter\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-twitter\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/github.com\/olawanlejoel\"\n aria-label=\"GitHub\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-github\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"\n aria-label=\"LinkedIn\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-linkedin\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/>\n )\n}\n\nexport default Footer;<\/code><\/pre>\n\/\/ pages\/_document.js\n\nimport { Html, Head, Main, NextScript } from 'next\/document';\n\nexport default function Document() {\n return (\n <Html lang=\"en\">\n <Head>\n <meta charSet=\"utf-8\" \/>\n <link\n rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\"\n integrity=\"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf\/nwasF0nqhPay5w\/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==\"\n crossorigin=\"anonymous\"\n referrerpolicy=\"no-referrer\"\n \/>\n <\/Head>\n <body>\n <Main \/>\n <NextScript \/>\n <\/body>\n <\/Html>\n );\n}<\/code><\/pre>\nintegrity<\/code> hash voor die release inwisselen.<\/p>\n\/\/ components\/Layout.jsx\n\nimport Navbar from '.\/navbar';\nimport Footer from '.\/footer';\n\nconst Layout = ({ children }) => {\n return (\n <>\n <Navbar \/>\n <main>{children}<\/main>\n <Footer \/>\n <\/>\n )\n}\n\nexport default Layout;<\/code><\/pre>\n\/\/ pages\/_app.js\n\nimport '@\/styles\/globals.css';\nimport Layout from '..\/components\/layout';\n\nexport default function App({ Component, pageProps }) {\n return (\n <Layout>\n <Component {...pageProps} \/>\n <\/Layout>\n );\n}<\/code><\/pre>\n![\"Afbeelding](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/layout-component.jpg\")
Portfoliocomponenten bouwen<\/h3>\n
npm run dev<\/code>.<\/p>\nDe Hero component<\/h4>\n
\/\/ components\/Hero.jsx\n\nimport Image from \"next\/image\";\n\nconst Hero = () => {\n return (\n <div className=\"hero-container\">\n <Image src='\/images\/profile.jpeg' className=\"profile-img\" width={300} height={300} alt=\"Joe's personal headshot\" \/>\n <div className=\"hero-text\">\n <h1>Hey, I'm Joe \ud83d\udc4b<\/h1>\n <p>\n I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing)\n exceptional websites, applications, and everything in between.\n <\/p>\n <div className=\"social-icons\">\n <a\n href=\"https:\/\/twitter.com\/olawanle_joel\"\n aria-label=\"Twitter\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-twitter\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/github.com\/olawanlejoel\"\n aria-label=\"GitHub\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-github\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"\n aria-label=\"LinkedIn\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-linkedin\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default Hero;<\/code><\/pre>\nimg<\/code> tag om de afbeelding toe te voegen, omdat die automatische afbeeldingsoptimalisatie, resizing en nog veel meer mogelijk maakt.<\/p>\n![\"Next.js](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/hero-component.jpg\")
De About component<\/h4>\n
\/\/ components\/About.jsx\n\nimport Image from \"next\/image\";\n\nconst About = () => {\n return (\n <div className=\"about-container\">\n <h2>About Me<\/h2>\n <div className=\"flex-about\">\n <div className=\"about-text\">\n <p>\n As a developer, I have always been passionate about creating elegant and effective solutions to\n complex problems. I have a strong foundation in software development, with a focus on web\n technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and\n back-end of applications, and I am always looking for ways to optimize performance, improve user\n experience, and ensure the highest level of code quality.\n <\/p>\n <p>Throughout my career, I have worked on a wide range of projects, from simple static websites to\n complex enterprise-level applications. I am experienced in working with a variety of development\n tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager\n to learn and explore new technologies, and I am constantly seeking out opportunities to improve\n my skills and knowledge.<\/p>\n <\/div>\n <div className=\"about-img\">\n <Image src='\/images\/about.jpeg' className=\"profile-img\" width={300} height={500}\/>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default About;<\/code><\/pre>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-component.jpg\")
De\u00a0Skills\u00a0component<\/h4>\n
![\"Skills](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/skills-component.jpg\")
\/\/ components\/Skills.jsx\n\nconst Skills = () => {\n return (\n <div className=\"skills-container\">\n <h2>Skills<\/h2>\n <div className=\"grid-skills\">\n <div className=\"skill-card html\">\n <i className=\"fa-brands fa-html5 html-icon\"><\/i>\n <p>HTML<\/p>\n <\/div>\n <div className=\"skill-card css\">\n <i className=\"fa-brands fa-css3-alt css-icon\"><\/i>\n <p>CSS<\/p>\n <\/div>\n <div className=\"skill-card js\">\n <i className=\"fa-brands fa-js-square js-icon\"><\/i>\n <p>JavaScript<\/p>\n <\/div>\n <div className=\"skill-card react\">\n <i className=\"fa-brands fa-react react-icon\"><\/i>\n <p>React<\/p>\n <\/div>\n <div className=\"skill-card node\">\n <i className=\"fa-brands fa-node-js node-icon\"><\/i>\n <p>Node<\/p>\n <\/div>\n <div className=\"skill-card python\">\n <i className=\"fa-brands fa-python python-icon\"><\/i>\n <p>Python<\/p>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default Skills;<\/code><\/pre>\nHet Projects component<\/h4>\n
![\"Next.js](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/projects-component.jpg\")
\/\/ components\/data.js\n\nexport const projectData = [\n {\n id: 1,\n title: 'Todo List App',\n description:\n '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.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Todo-List-App',\n },\n {\n id: 2,\n title: 'Books Library App',\n description:\n '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.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Book-Library',\n },\n {\n id: 3,\n title: 'Quotes Generator',\n description:\n 'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/random-quote-generator',\n },\n {\n id: 4,\n title: 'Password Generator',\n description:\n 'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Password-Generator',\n },\n {\n id: 5,\n title: 'Twitter UI Clone',\n description:\n '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.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/TwitterUI-clone',\n },\n];<\/code><\/pre>\nmap()<\/code> array methode om door de gegevensarray te loopen na het importeren in de Projecten component.<\/p>\n\/\/ components\/Projects.jsx\n\nimport { projectData } from '.\/data.js';\n\nconst Projects = () => {\n return (\n <div className=\"projects-container\">\n <h2>Projects<\/h2>\n <div className=\"projects-grid\">\n {projectData && projectData.map((project) => (\n <div className=\"project-card\" key={project.id}>\n <div className=\"project-header\">\n <i className=\"fa-regular fa-folder-open folder-icon\"><\/i>\n <div className=\"small-icons\">\n <a href={project.gitHubLink}><i className=\"fa-brands fa-github\"><\/i><\/a>\n <\/div>\n <\/div>\n <h3>{project.title}<\/h3>\n <p>{project.description}<\/p>\n <\/div>\n ))\n }\n <\/div>\n <\/div>\n )\n}\n\nexport default Projects;<\/code><\/pre>\nHet Contact Component<\/h4>\n
\/\/ components\/Contact.jsx\n\nconst Contact = () => {\n return (\n <div className=\"contact-container\">\n <h2>Get In Touch<\/h2>\n <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>\n <a href=\"mailto:example@kinsta.com\" className='cta-btn'>Say Hello<\/a>\n <\/div>\n )\n}\n\nexport default Contact;<\/code><\/pre>\na<\/code>, zodat de knop een e-mailprogramma start met een aan jou gericht bericht.<\/p>\n![\"Contact](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/contact-component.jpg\")
\/\/ pages\/index.js\n\nimport Hero from '@\/components\/Hero';\nimport About from '@\/components\/About';\nimport Skills from '@\/components\/Skills';\nimport Projects from '@\/components\/Projects';\nimport Contact from '@\/components\/Contact';\n\nimport Head from 'next\/head';\n\nconst Home = () => {\n return (\n <>\n <Head>\n <title>Joel's Portfolio<\/title>\n <meta name=\"description\" content=\"Joel's Portfolio\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n <link rel=\"icon\" href=\"\/favicon.ico\" \/>\n <\/Head>\n <div>\n <Hero \/>\n <About \/>\n <Skills \/>\n <Projects \/>\n <Contact \/>\n <\/div>\n <\/>\n );\n};\n\nexport default Home;<\/code><\/pre>\nImage<\/code> component. Voordat je een applicatie in productie neemt die de Next.js Image component gebruikt, wordt het sterk aangeraden om sharp<\/a> te installeren. Je kunt dit doen door naar je terminal te navigeren, ervoor te zorgen dat je in de map van je project bent, en dan het volgende commando uit te voeren:<\/p>\nnpm i sharp<\/code><\/pre>\nZo deploy je een Next.js applicatie naar Kinsta<\/h2>\n
Je code naar GitHub pushen<\/h3>\n
![\"Maak](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Create-a-new-repository-on-GitHub.jpg\")
![\"Toegang](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/how-to-get-repository-URL.jpg\")
git init<\/code><\/pre>\ngit add .<\/code><\/pre>\ngit commit -m \"my first commit\"<\/code><\/pre>\n\ngit remote add origin [repository URL]\ngit push -u origin master<\/code><\/pre>\nJe portfolio deployen naar Kinsta<\/h3>\n
\n
![\"Maak](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/host-application-on-kinsta.jpg\")
![\"Automatisch](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploying_application_to_kinsta.gif\")
![\"Deployment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deployemnt-link-on-kinsta.jpg\")