如何使用 Next.js 構建和部署開發人員組合

已發表: 2023-03-06

開發人員組合是展示您的技能和經驗的工作示例和項目的集合。強大的投資組合使您在找工作時從其他候選人中脫穎而出。但不僅如此：作品集還可以成為建立人際網絡、跟踪學習情況以及確立自己作為主題專家的寶貴工具。

在本教程中，您將學習如何使用 Next.js 構建開發人員組合，並直接從您的 GitHub 存儲庫部署到 Kinsta 的應用程序託管平台，該平台提供免費的.kinsta.app域，讓您的工作快速上線。

這是您將使用 Next.js 構建的開發人員組合的現場演示。

如果你想仔細看看，你可以訪問這個項目的 GitHub 存儲庫，或者你可以 fork 我創建的這個 Next.js 組合入門項目。入門組合包含基本代碼，如樣式、Font Awesome CDN 鏈接、圖像和基本結構。

要求/先決條件

這是一種“後續”類型的教程。如果你有：

HTML、CSS 和 JavaScript 的基礎知識
對 React 和 Next.js 有一點了解
在您的計算機上安裝 Node.js 和 npm（節點包管理器）或紗線

為什麼選擇 Next.js？

Next.js 是一個基於 React 的開源 JavaScript 庫框架，可用於廣泛的 Web 開發項目，因為它簡化了構建服務器端渲染和靜態應用程序。它通過利用 React 的最佳功能和優化渲染性能以改善用戶體驗來簡化流程。 Next.js 的一些最常見用例包括：

構建靜態網站：Next.js 可以構建快速、易於部署且需要最少維護的靜態網站，例如我們將在本教程中構建的開發人員組合網站。
構建動態網站：Next.js 允許您創建動態網站，這些網站可以根據用戶交互或服務器端數據獲取來更改內容。

構建電子商務網站：Next.js 非常適合構建需要服務器端渲染以改進 SEO 和性能的電子商務網站。

構建漸進式 Web 應用程序 (PWA) ：Next.js 支持創建 PWA，PWA 是功能類似於本機應用程序並且可以安裝在用戶設備上的 Web 應用程序。

如何設置 Next.js 開發環境

要為 Next.js 設置開發環境，首先要在您的計算機上安裝 Node.js，因為您將使用npx命令運行 npm 包，而無需在您的系統上全局安裝它們。完成後，您現在可以通過運行以下命令來創建 Next.js 項目：

 npx [email protected] my-portfolio

將出現一個提示，要求您確認一些額外的依賴項。然後你可以運行npm run dev使你的應用程序在localhost:3000可用。

使用npx命令創建 Next.js 項目時，它會自動搭建一個包含以下主要目錄的文件夾結構：

pages ：此文件夾包含應用程序的頁面，這些頁面根據文件名自動路由。例如， pages/index.js將是主頁，而pages/about.js將是關於頁面。
public ：此文件夾包含可以直接提供的靜態文件，例如圖像、字體和其他資產。
components ：此文件夾是可選的，包含可在整個應用程序中使用的可重用 UI 組件。
styles ：此文件夾也是可選的，包含可應用於整個應用程序的全局樣式。

根據具體的配置和功能，也可能會生成其他目錄和文件，但這些是基本 Next.js 項目的核心目錄。

對於本教程，我們構建的所有內容都將出現在索引頁面（我們的單頁網站）上，並且您將包括各種部分的組件，如英雄、關於、項目等。

如何使用 Next.js 構建響應式開發人員組合

投資組合通常由以下組件組成：

導航欄組件
英雄組件
關於組件
技能成分
項目組件
接觸元件
頁腳組件

如果作品集不止一頁，則 Navbar 和 Footer 組件應該出現在所有頁面上。這可以在 Next.js 中通過定義佈局來實現。

在 Next.js 中定義佈局

在 Next.js 中，佈局是一種為出現在網站每個頁面上的組件定義一致結構的方法。佈局通常包括在所有站點頁面上顯示的頁眉、導航菜單和頁腳等元素。

首先在 Next.js 項目的src （源）目錄中創建一個組件文件夾。接下來，創建將在 Layout 組件中使用的 Navbar 和 Footer 組件。

這是Navbar.jsx中的 Navbar 組件：

 // 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;

這是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;

注意：要使 Font Awesome 圖標正常工作，您必須將 Font Awesome 安裝到您的項目中或使用其 CDN。您可以像這樣將 CDN 鏈接添加到您的_document.js文件：

 // 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> ); }

注意：如果您通過 CDN 鏈接到不同版本的 Font Awesome，您將需要在該版本的適當integrity哈希之上交換。

在為您的佈局創建所有必要的組件後，您可以創建佈局組件本身，並通過將頁面內容包裝在其中來將此組件添加到您的頁面。

Layout 組件將接受一個 <code>children</code> 屬性，允許您訪問 Next.js 頁面的內容。

 // components/Layout.jsx import Navbar from './navbar'; import Footer from './footer'; const Layout = ({ children }) => { return ( <> <Navbar /> <main>{children}</main> <Footer /> </> ) } export default Layout;

此時，您已經成功創建了 Layout 組件，該組件將 Navbar 和 Footer 與正確定位的子道具放在一起。您現在可以通過將頁面內容包裝在其中來將 Layout 組件添加到您的頁面。這將在_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> ); }

您現在已經成功地為您的開發人員組合創建佈局。對於這個組合，我們更關注 Next.js 以及如何將您的網站部署到 Kinsta。所以你可以將 styles/globals.css 文件中的樣式複製到你自己的項目中。如果您在開發模式下啟動您的投資組合網站，您現在應該會看到您的應用程序的佈局。

現在是時候為您的投資組合網站提供適當的內容了。

構建投資組合組件

您現在可以為開發人員組合的每個部分創建單獨的組件。所有這些組件都將導入到您的 Next.js 項目的索引頁面中，因此它們可以在您使用npm run dev啟動項目時顯示。

英雄組件

Hero 組件是導航欄下方的第一個部分，其主要目的是吸引用戶的注意力並讓他們了解網站或應用程序的內容。

 // 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;

在上面的代碼中，您會注意到使用 Next.js Image 組件而不是 HTML img標籤來添加圖像，因為它支持自動圖像優化、調整大小等。

在 About 組件中，您還會注意到添加了一個簡單的段落，其中很少提及開發人員，同時還添加了一些來自 Font Awesome 的社交圖標，以添加社交鏈接。

Hero 組件應該是這樣的：

您可以向 Hero 組件添加更多內容，調整styles/globals.css文件中的樣式，甚至以您自己的方式重新創建此部分。

關於組件

關於組件旨在告訴讀者或訪問您的投資組合的人更多關於您的信息，在任意多的段落中。如果您想更多地了解自己，可以創建一個專門的“關於我”頁面，並在此部分添加一個按鈕以了解更多關於您自己的信息。

 // 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;

上面的代碼包含兩段關於開發者的文字和一張開發者的圖片。這是關於部分的預期外觀：

您可以隨時調整樣式以添加更多圖像和更多內容。

技能部分

技能組件旨在展示開發人員最常用的一些技術或開發人員過去使用過的技術。

您可以通過在外部文件中創建一個數組然後導入技能組件來使其更易於維護，這樣您就可以遍歷而不是重複類似的代碼。

 // 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;

在上面的代碼中，為每個技能創建了一張卡片，每張卡片都包含來自 font-awesome 的技術圖標和技術名稱。您還可以添加更多樣式並調整代碼以使其更具吸引力和獨特性。

項目組件

項目組件是開發人員投資組合的重要部分之一。項目提供了開發人員技能和能力的切實證據，並展示了他們將知識應用於現實世界問題的能力。

每個項目都將包含項目的簡要說明、源代碼鏈接（我們在這裡使用 GitHub 鏈接）以及您希望添加的任何其他詳細信息。

您可以創建一個數組來保存每個項目的詳細信息，然後將其導入您的組件以避免對它們進行硬編碼。

讓我們創建一個data.js文件來存儲項目數據數組。您可以將此文件存儲在組件文件夾或pages/api文件夾中。對於這個演示，我將把它存儲在組件文件夾中。該數組將為每個項目保存一個對象，該對象將保存項目名稱、描述和 GitHub 鏈接。

 // 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', }, ];

您現在可以創建一個項目組件以通過輕鬆循環來利用此數據。您可以使用任何 JavaScript 迭代方法，但對於本教程，您可以使用 JavaScript map()數組方法在將數據數組導入 Projects 組件後對其進行循環。

 // 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;

在上面的代碼中，您通過遍歷數組將所有項目輸出到 Projects 組件中，從而成功地避免了重複，這使得維護和添加更多項目變得容易。

接觸組件

創建開發人員組合的原因之一是潛在客戶可以聯繫到您。一種方式是讓人們向您發送電子郵件，這是我們將在此聯繫人組件中提供的便利。

 // 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;

將您的電子郵件地址放在a標籤中，以便該按鈕將啟動一個電子郵件應用程序，其中包含一條發送給您的消息。

您現在已經成功地為您的投資組合應用程序創建了所有組件。下一步是將它們添加到您的索引頁面。導航到默認創建的pages/index.js文件，並將其代碼替換為以下內容。

 // 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;

當您現在運行您的應用程序時，您會注意到已經創建了一個完整的投資組合網站。最後，在部署您的應用程序之前，讓我們安裝一個依賴項。使用 Next.js 的一個優勢是它帶來了許多功能，例如基於文件的路由、圖像優化等等。

圖像優化由 Next.js Image組件處理。在使用 Next.js Image 組件將應用程序部署到生產環境之前，強烈建議您安裝 sharp。您可以通過導航到您的終端來執行此操作，確保您位於項目目錄中，然後運行以下命令：

 npm i sharp

您現在可以部署您的應用程序，圖像將在 Next.js 提供的全面優化下正常工作。

如何將 Next.js 應用程序部署到 Kinsta

一旦您對展示您最好的開發工作和關鍵信息的作品集感到滿意，您可能會想與他人分享，對嗎？讓我們看看如何使用 GitHub 和 Kinsta 的應用程序託管平台來做到這一點。

將代碼推送到 GitHub

有多種方法可以將代碼推送到 GitHub，但在本教程中我們使用 Git。 Git 廣泛用於軟件開發，因為它提供了一種可靠且高效的方式來管理代碼更改、項目協作和維護版本歷史記錄。

您可以使用以下步驟將代碼上傳到 GitHub：

首先，創建一個新的存儲庫（就像一個本地文件夾來存儲您的代碼）。您可以登錄 GitHub 帳戶，單擊屏幕右上角的+按鈕，然後從下拉菜單中選擇新建存儲庫，如下圖所示。

下一步是為您的存儲庫命名，添加描述（可選），然後選擇您希望存儲庫公開還是私有。然後單擊創建存儲庫。您現在可以將代碼推送到新的 GitHub 存儲庫。

使用 Git 推送代碼所需的全部是存儲庫 URL，您可以在存儲庫的主頁上、 “克隆”或“下載”按鈕下或在創建存儲庫後出現的步驟中找到它。

您可以通過打開終端或命令提示符並導航到包含您的項目的目錄來準備推送您的代碼。使用以下命令初始化本地 Git 存儲庫：

 git init

現在使用以下命令將代碼添加到本地 Git 存儲庫：

 git add .

上面的命令將當前目錄及其子目錄中的所有文件添加到新的 Git 存儲庫中。您現在可以使用以下命令提交更改：

 git commit -m "my first commit"

注意：您可以將“我的第一次提交”替換為您自己的簡短消息，描述您所做的更改。

最後，使用以下命令將代碼推送到 GitHub：

 git remote add origin [repository URL] git push -u origin master

注意：確保將“[repository URL]”替換為您自己的 GitHub 存儲庫的 URL。

完成這些步驟後，您的代碼將被推送到 GitHub 並可通過存儲庫的 URL 訪問。您現在可以將存儲庫部署到 Kinsta。

將您的投資組合部署到 Kinsta

只需幾分鐘即可部署到 Kinsta。從 My Kinsta 儀表板開始登錄或創建您的帳戶。

接下來，您將通過以下快速步驟在 GitHub 上授權 Kinsta：

單擊左側欄中的應用程序
點擊添加服務
從下拉菜單中，單擊應用程序，因為您要將 Next.js 應用程序部署到 Kinsta。

將出現一個模式，您可以通過它選擇要部署的存儲庫。

如果您的存儲庫中有多個分支，您可以選擇要部署的分支。您還可以為此應用程序指定一個名稱。確保在 25 個可用數據中心位置中選擇一個位置，然後 Kinsta 將自動檢測啟動命令。

此時，您的應用程序將開始部署。幾分鐘後，將提供一個鏈接以訪問您的應用程序的已部署版本。在這種情況下，它是： https://kinsta-developer-portfolio-ir8w8.kinsta.app/

注意：啟用了自動部署，因此每當您更改代碼庫並將其推送到 GitHub 時，Kinsta 都會自動重新部署您的應用程序。

想展示您的編碼技能嗎？開發人員組合是實現這一目標的完美方式！了解如何使用 Next.js 構建一個並將您的職業提升到一個新的水平。點擊鳴叫

概括

開發人員應考慮將 Next.js 用於其 Web 項目的原因有多種。首先，它提供開箱即用的優化性能，具有預取和代碼拆分等有助於減少頁面加載時間的功能。其次，它為 React 開發人員提供熟悉的開發體驗，支持樣式化組件和最新的 React 功能等流行工具。

Kinsta 為 Next.js 的各種部署選項提供支持，包括傳統的基於服務器的託管和現代無服務器平台。這允許開發人員選擇最適合他們需求的部署選項，同時受益於框架的性能優化和其他好處。

在本教程中，您逐步學習瞭如何使用 Next.js 構建響應式投資組合網站，然後將其部署到 Kinsta。

您可以免費試用 Kinsta 的應用程序託管，如果您喜歡，可以選擇我們的 Hobby Tier 計劃，起價為每月 7 美元。

現在輪到您挑戰自我了：為您新開發的投資組合網站添加更多功能！這裡有一些讓您的創意源源不斷的想法：添加更多包含詳細信息的頁面，將博客與 MDX 集成，實現一些動畫。在下面的評論中分享您的項目和經驗！