如何使用 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 集成，实现一些动画。在下面的评论中分享您的项目和经验！