使用 Next.js 在 Heroku 上部署应用程序-JavaScript中文网-JavaScript教程资源分享门户

简介

Next.js 是一个基于 React 的轻量级框架，它提供了一些便利的功能来简化前端应用程序的开发。在本文中，我们将介绍如何使用 Next.js 在 Heroku 上部署应用程序。

准备工作

在开始之前，您需要完成以下准备工作：

确保您已经安装了 Node.js 和 npm。
创建一个新的 Next.js 应用程序。您可以通过运行以下命令来创建一个新的 Next.js 应用程序：

npx create-next-app my-app

创建一个新的 Heroku 应用程序。您可以在 Heroku 上创建一个新的应用程序，或者使用 Heroku CLI 来创建一个新的应用程序。

部署应用程序

在完成准备工作之后，您可以开始部署应用程序了。按照以下步骤进行操作：

在您的 Next.js 应用程序的根目录下创建一个新的文件 Procfile，并添加以下内容：

web: npm run start

在应用程序的根目录下创建一个新的文件 app.json，并添加以下内容：

// javascriptcn.com 代码示例
{
  "name": "my-app",
  "description": "My Next.js app",
  "buildpacks": [
    {
      "url": "https://github.com/heroku/heroku-buildpack-nodejs.git"
    }
  ],
  "scripts": {
    "heroku-postbuild": "npm run build"
  }
}

将应用程序推送到 Heroku：

git add .
git commit -m "Initial commit"
heroku login
heroku git:remote -a your-app-name
git push heroku master

等待 Heroku 构建和部署您的应用程序。完成后，您可以在浏览器中访问您的应用程序。

示例代码

以下是一个简单的 Next.js 应用程序示例，它包含一个页面和一个 API 端点：

// javascriptcn.com 代码示例
// pages/index.js
import React from 'react';

export default function Home({ data }) {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <p>{data.message}</p>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/hello');
  const data = await res.json();

  return {
    props: {
      data
    }
  };
}

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, API!' });
}

在您的根目录下创建一个名为 .env.local 的文件，并添加以下内容：

API_URL=https://your-api-url.com

在您的应用程序中使用环境变量：

// javascriptcn.com 代码示例
// pages/index.js
import React from 'react';

export default function Home({ data }) {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <p>{data.message}</p>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch(`${process.env.API_URL}/hello`);
  const data = await res.json();

  return {
    props: {
      data
    }
  };
}

总结

在本文中，我们介绍了如何使用 Next.js 在 Heroku 上部署应用程序。我们还提供了一个示例应用程序，展示了如何使用 Next.js 创建页面和 API 端点，并如何使用环境变量来配置应用程序。希望这篇文章对您有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656b270bd2f5e1655d393082