Nhost与Next.js快速入门指南：构建全栈电影数据库应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00759/article/details/148440139

Nhost与Next.js快速入门指南：构建全栈电影数据库应用

nhost nhost/nhost: 是一个用于构建基于 Nuxt.js 的后端应用程序的框架，可以方便地实现 Nuxt.js 后端应用程序的开发。适合对 Nuxt.js、后端应用程序和想要实现 Nuxt.js 后端应用程序的开发者。项目地址: https://gitcode.com/gh_mirrors/nh/nhost

前言

Nhost是一个基于PostgreSQL数据库的开源后端即服务(BaaS)平台，提供GraphQL API、身份验证、存储等后端功能。结合Next.js这一流行的React框架，开发者可以快速构建现代化的全栈应用。本文将详细介绍如何使用Nhost与Next.js搭建一个简单的电影数据库应用。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

Node.js 16.8或更高版本
npm或yarn包管理器
现代浏览器

项目创建与配置

1. 创建Nhost项目

首先需要在Nhost平台上创建一个新项目。项目创建完成后，系统会自动为你分配一个唯一的子域名(subdomain)和区域(region)，这些信息将在后续步骤中用于配置客户端连接。

2. 初始化数据库

Nhost使用PostgreSQL作为默认数据库。我们需要创建一个movies表并插入一些示例数据：

CREATE TABLE movies (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  director VARCHAR(255),
  release_year INTEGER,
  genre VARCHAR(100),
  rating FLOAT
);

INSERT INTO movies (title, director, release_year, genre, rating) VALUES
  ('Inception', 'Christopher Nolan', 2010, 'Sci-Fi', 8.8),
  ('The Godfather', 'Francis Ford Coppola', 1972, 'Crime', 9.2),
  ('Forrest Gump', 'Robert Zemeckis', 1994, 'Drama', 8.8),
  ('The Matrix', 'Lana Wachowski, Lilly Wachowski', 1999, 'Action', 8.7);

重要提示：执行SQL语句时，请确保勾选"Track this"选项，这样Nhost才能自动为表生成GraphQL API。

3. 设置权限

为了允许前端应用访问数据，需要为public角色配置select权限：

在Nhost控制台中找到movies表
点击"Edit Permissions"
为public角色启用select操作权限

Next.js应用开发

1. 初始化Next.js项目

使用以下命令创建一个新的Next.js应用：

npx create-next-app@next-14 --no-eslint \
    --src-dir \
    --no-tailwind \
    --import-alias "@/*" \
    --js \
    --app \
    nhost-nextjs-quickstart

这个命令会创建一个包含App Router的Next.js 14项目，并禁用了一些默认配置以简化示例。

2. 安装Nhost客户端库

进入项目目录并安装Nhost的Next.js专用客户端库：

cd nhost-nextjs-quickstart && npm install @nhost/nextjs

3. 配置Nhost客户端

在项目中创建src/lib/nhost.js文件，配置Nhost客户端连接：

import { NhostClient } from "@nhost/nextjs";

export const nhost = new NhostClient({
  subdomain: "<你的子域名>",
  region: "<你的区域>",
})

请将占位符替换为你项目实际的子域名和区域信息。

4. 实现电影列表页面

修改src/app/page.js文件，实现电影数据获取和展示功能：

'use client'

import { useEffect, useState } from "react";
import { NhostProvider } from "@nhost/nextjs";
import { nhost } from '../lib/nhost'

// GraphQL查询语句
const getMovies = `
  query {
    movies {
      title
      genre
      rating
    }
  }
`;

function App() {
  return (
    <NhostProvider nhost={nhost}>
      <Home />
    </NhostProvider>
  );
}

function Home() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    async function fetchMovies() {
      setLoading(true);
      const { data, error } = await nhost.graphql.request(getMovies);

      if (error) {
        console.error("Error fetching movies:", error);
        return;
      }

      setMovies(data.movies);
      setLoading(false);
    }

    fetchMovies();
  }, []);

  return (
    <div>
      <h1>电影数据库</h1>
      {loading ? (
        <p>加载中...</p>
      ) : (
        <table>
          <thead>
            <tr>
              <th>电影名称</th>
              <th>类型</th>
              <th>评分</th>
            </tr>
          </thead>
          <tbody>
            {movies.map((movie, index) => (
              <tr key={index}>
                <td>{movie.title}</td>
                <td>{movie.genre}</td>
                <td>{movie.rating}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default App;