津田 淳

津田 淳

1678885829

使用 Next.js 构建和部署开发人员组合

开发人员组合是展示您的技能和经验的工作示例和项目的集合。强大的投资组合使您在找工作时从其他候选人中脱颖而出。但不仅如此：作品集还可以成为建立人际网络、跟踪学习情况以及确立自己作为主题专家的宝贵工具。

在本教程中，您将学习如何使用 Next.js 构建开发人员组合，并直接从您的 GitHub 存储库部署到 Kinsta 的应用程序托管平台，该平台提供免费的.kinsta.app域，让您的工作快速上线。

这是您将使用 Next.js 构建的开发人员组合的现场演示。

如果你想仔细看看，你可以访问这个项目的 GitHub 存储库，或者你可以 fork 我创建的这个Next.js 组合入门项目。入门组合包含基本代码，如样式、Font Awesome CDN 链接、图像和基本结构。

要求/先决条件

这是一种“后续”类型的教程。如果你有：

为什么选择 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.jsnpx ，因为您将使用命令运行 npm 包，而无需在您的系统上全局安装它们。完成后，您现在可以通过运行以下命令来创建 Next.js 项目：

npx create-next-app@latest my-portfolio

将出现一个提示，要求您确认一些额外的依赖项。然后您可以运行以使您的应用程序在localhost:3000npm run dev可用。

显示新 next.js 项目的代码。

创建一个新的 Next.js 项目。

使用该npx命令创建 Next.js 项目时，它会自动搭建一个包含以下主要目录的文件夹结构：

  1. pages：此文件夹包含应用程序的页面，这些页面根据文件名自动路由。例如，pages/index.js将是主页，而pages/about.js将是关于页面。
  2. public：此文件夹包含可以直接提供的静态文件，例如图像、字体和其他资产。
  3. components：此文件夹是可选的，包含可在整个应用程序中使用的可重用 UI 组件。
  4. 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 组件img而不是 HTML标记来添加图像，因为它支持自动图像优化、调整大小等。

在 About 组件中，您还会注意到添加了一个简单的段落，其中很少提及开发人员，同时还添加了一些来自 Font Awesome 的社交图标，以添加社交链接。

Hero 组件应该是这样的：

投资组合网站的 Next.js 英雄组件

英雄组件

您可以向 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;

上面的代码包含两段关于开发者的文字和一张开发者的图片。这是关于部分的预期外观：

Next.js 投资组合网站上的关于组件

关于组件

您可以随时调整样式以添加更多图像和更多内容。

技能部分

技能组件旨在展示开发人员最常用的一些技术或开发人员过去使用过的技术。

技能成分技能成分

您可以通过在外部文件中创建一个数组然后导入技能组件来使其更易于维护，这样您就可以遍历而不是重复类似的代码。

// 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链接）以及您希望添加的任何其他详细信息。

投资组合网站的 Next.js 项目组件

项目组件

您可以创建一个数组来保存每个项目的详细信息，然后将其导入您的组件以避免对它们进行硬编码。

让我们创建一个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 迭代方法，但对于本教程，您可以使用 JavaScriptmap()数组方法在将数据数组导入 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:example@kinsta.com" className='cta-btn'>Say Hello</a>
    </div>
  )
}

export default Contact;

将您的电子邮件地址放在a标签中，以便该按钮将启动一个电子邮件应用程序，其中包含一条发送给您的消息。

Next.js 投资组合网站的联系组件

接触元件

您现在已经成功地为您的投资组合应用程序创建了所有组件。下一步是将它们添加到您的索引页面。导航到默认创建的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 图像组件将应用程序部署到生产环境之前，强烈建议您安装sharp。您可以通过导航到您的终端来执行此操作，确保您位于项目目录中，然后运行以下命令：

npm i sharp

您现在可以部署您的应用程序，图像将在 Next.js 提供的全面优化下正常工作。

如何将 Next.js 应用程序部署到 Kinsta

一旦您对展示您最好的开发工作和关键信息的作品集感到满意，您可能会想与他人分享，对吧？让我们看看如何使用 GitHub 和 Kinsta 的应用程序托管平台来做到这一点。

将代码推送到 GitHub

有多种方法可以将代码推送到 GitHub，但在本教程中我们使用 Git。Git 广泛用于软件开发，因为它提供了一种可靠且高效的方式来管理代码更改、项目协作和维护版本历史记录。

您可以使用以下步骤将代码上传到 GitHub：

首先，创建一个新的存储库（就像一个本地文件夹来存储您的代码）。您可以登录 GitHub 帐户，单击屏幕右上角的+按钮，然后从下拉菜单中选择新建存储库，如下图所示。

创建一个新的 GitHub 存储库

创建一个新的 GitHub 存储库。

下一步是为您的存储库命名，添加描述（可选），然后选择您希望存储库公开还是私有。然后单击创建存储库。您现在可以将代码推送到新的 GitHub 存储库。

使用 Git 推送代码所需的全部是存储库 URL，您可以在存储库的主页上、“克隆”或“下载”按钮下或在创建存储库后出现的步骤中找到它。

访问您的 GitHub 存储库 URL

访问您的 GitHub 存储库 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 ：

  1. 单击左侧栏中的应用程序
  2. 点击添加服务
  3. 从下拉菜单中，单击应用程序，因为您要将 Next.js 应用程序部署到 Kinsta。

在 MyKinsta 中创建一个应用程序项目

在 MyKinsta 中创建一个应用程序项目

将出现一个模式，您可以通过它选择要部署的存储库。

如果您的存储库中有多个分支，您可以选择要部署的分支。您还可以为此应用程序指定一个名称。确保在 25 个可用数据中心位置中选择一个位置，然后 Kinsta 将自动检测启动命令。

自动检测启动命令

自动检测启动命令

此时，您的应用程序将开始部署。几分钟后，将提供一个链接以访问您的应用程序的已部署版本。在这种情况下，它是：https://kinsta-developer-portfolio-ir8w8.kinsta.app/

Kinsta 上的部署链接

Kinsta 上的部署链接

注意：启用了自动部署，因此每当您更改代码库并将其推送到 GitHub 时，Kinsta 都会自动重新部署您的应用程序。

想展示您的编码技能吗？开发人员组合是实现这一目标的完美方式！了解如何使用 Next.js 构建一个并将您的职业提升到一个新的水平。🚀💻点击推文

概括

开发人员应考虑将 Next.js 用于其 Web 项目的原因有多种。首先，它提供开箱即用的优化性能，具有预取和代码拆分等有助于减少页面加载时间的功能。其次，它为 React 开发人员提供熟悉的开发体验，支持样式化组件和最新的 React 功能等流行工具。

Kinsta 为 Next.js 的各种部署选项提供支持，包括传统的基于服务器的托管和现代无服务器平台。这允许开发人员选择最适合他们需求的部署选项，同时受益于框架的性能优化和其他好处。

在本教程中，您逐步学习了如何使用 Next.js 构建响应式投资组合网站，然后将其部署到 Kinsta。

您可以免费试用 Kinsta 的应用程序托管，如果您喜欢，可以选择我们的Hobby Tier计划，起价为每月 7 美元。

现在轮到您挑战自我了：为您新开发的投资组合网站添加更多功能！这里有一些让您的创意源源不断的想法：添加更多包含详细信息的页面，将博客与 MDX 集成，实现一些动画。在下面的评论中分享您的项目和经验！

文章原文出处：https:   //kinsta.com/

#next #deploy #developer #portfolio 

What is GEEK

Buddha Community

使用 Next.js 构建和部署开发人员组合
JavaScript Daily

JavaScript Daily

1632537859

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

  • Fast startup without relying on a custom version of Node.js.
  • Small artifact (current size is around 1.2MB).
  • First class macros.
  • Support building small TUI apps using Reagent.
  • Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))

$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

  • destructuring using :syms
  • property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

  • babashka >= 0.4.0
  • Clojure CLI >= 1.10.3.933
  • Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

  • Clone and cd into this repo
  • bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

Eva Murphy

Eva Murphy

1625674200

Google analytics Setup with Next JS, React JS using Router Events - 14

In this video, we are going to implement Google Analytics to our Next JS application. Tracking page views of an application is very important.

Google analytics will allow us to track analytics information.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #js #react js #react #next #google analytics

Eva Murphy

Eva Murphy

1625751960

Laravel API and React Next JS frontend development - 28

In this video, I wanted to touch upon the functionality of adding Chapters inside a Course. The idea was to not think much and start the development and pick up things as they come.

There are places where I get stuck and trying to find answers to it up doing what every developer does - Google and get help. I hope this will help you understand the flow and also how developers debug while doing development.

App url: https://video-reviews.vercel.app
Github code links below:
Next JS App: https://github.com/amitavroy/video-reviews
Laravel API: https://github.com/amitavdevzone/video-review-api

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #api #react next js #next #frontend #development

Lilyan Streich

Lilyan Streich

1599119110

Next js Tutorial For Beginners

Next js Tutorial For Beginners is the today’s topic. It is no secret that creating single-page applications can be immensely challenging these days. But with the help of some libraries, frameworks, and tools, it is effortless nowadays. React.js is the common frontend libraries among the Front-end developers. Its virtual dom theory makes React faster and gives us the better application performance. Now, one problem is that Single Page Applications are not at all SEO  friendly because it is rendered on the Client side  and not Server side . So when the Search Engine crawlers try to send a request, they cannot get our meta content or description and not even the main content. Search Engines do not care about how your app is architected or whatever ideology was used to adjust and fetch the right material. Their bots are not as smart as using your apps as a real user would. All they care about is that once they send their spiders to crawl and index your site, whatever the server provides on the first request is what gets indexed. In our case, all they get is our div tag with an id and bundled JS file, and we can not index our website correctly. So some how, we need a SSR to tackle this problem and in React js, Next.js is the perfect solution.

#js #react.js #next.js

WebClues Infotech

WebClues Infotech

1616671994

Hire Dedicated Node.js Developers - Hire Node.js Developers

If you look at the backend technology used by today’s most popular apps there is one thing you would find common among them and that is the use of NodeJS Framework. Yes, the NodeJS framework is that effective and successful.

If you wish to have a strong backend for efficient app performance then have NodeJS at the backend.

WebClues Infotech offers different levels of experienced and expert professionals for your app development needs. So hire a dedicated NodeJS developer from WebClues Infotech with your experience requirement and expertise.

So what are you waiting for? Get your app developed with strong performance parameters from WebClues Infotech

For inquiry click here: https://www.webcluesinfotech.com/hire-nodejs-developer/

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated node.js developers #hire node.js developers #hire top dedicated node.js developers #hire node.js developers in usa & india #hire node js development company #hire the best node.js developers & programmers