使用 Next.js、Vercel Blob 和 Postgres 构建开源 DocSend 替代方案

ゝ一纸荒年。 2024-05-02 20:08 3阅读 0赞

### 您将在本文中找到什么？ ###

您可能遇到过用于安全文档共享、跟踪和存储的平台，例如 DocSend、Dropbox、Google Drive，并且这个列表还在继续。底层功能是您上传文档，与个人或群组共享链接，他们可以通过唯一链接查看文档。

动图

![bd8ba7acb896fbcba283197ced63cf35.gif][]

### Papermark - DocSend 的第一个动态开源替代品。 ###

简单介绍一下我们的背景。Papermark 是 DocSend 的动态开源替代品。我们主要帮助管理安全文档共享，包括实时分析。所有这些都是开源的。

如果你能给我们一颗星，我会非常高兴！并在评论中让我知道❤️

![b4fc107e00fd2f58a94de8a9c61ee958.png][]

### 设置项目 ###

在这里，我将指导您为文档共享应用程序创建项目环境。我们将设置 Next.js 应用程序。

#### 摆茶具 ####

在你开始之前，我建议你设置一个包管理器，就像`tea`处理你的开发环境一样。

`tea`让您专注于开发，它将负责安装`node`、`npm`以及`vercel`您可能需要进行开发的任何其他包。  
只需键入命令，包就会可用 - 即使您之前没有安装它。  
最好的部分是，`tea`将所有软件包安装在可重定位目录（*默认：）`~/.tea`*中，因此您不必担心污染系统文件。

#### 使用 TypeScript 和 Tailwindcss 设置 Next.js ####

我们正在使用`create-next-app`生成一个新的 Next.js 项目。我们还将使用 TypeScript 和 Tailwind CSS，因此我们将在出现提示时选择这些选项。

<code>npx create-next-app
 
 # ---
 # you'll be asked the following prompts
 What is your project named? my-app
 Would you like to add TypeScript with this project? Y/N
 # select `Y` for typescript
 Would you like to use ESLint with this project? Y/N
 # select `Y` for ESLint
 Would you like to use Tailwind CSS with this project? Y/N
 # select `Y` for Tailwind CSS
 Would you like to use the `src/ directory` with this project? Y/N
 # select `N` for `src/` directory
 What import alias would you like configured? `@/*`
 # enter `@/*` for import alias
 </code>

#### 设置 Vercel Blob ####

1.  注册 vercel.com
2.  转到[Storage – Dashboard – Vercel][Storage _ Dashboard _ Vercel]
3.  创建一个新的数据库；选择“斑点”
4.  不要忘记将 @vercel/blob 添加到你的 package.json

1.  完成🎉

![a67783b56801ec20121039e373f0a540.png][]

#### 设置 Vercel Postgres ####

1.  注册 vercel.com
2.  转到[Storage – Dashboard – Vercel][Storage _ Dashboard _ Vercel]
3.  创建一个新的数据库；选择“Postgres”
4.  完成🎉

![0c749bed0654add9614549822c9a5acf.png][]

#### 设置棱镜 ####

Prisma 是我们选择的数据库 ORM 层。它是与 Postgres 和其他数据库交互的绝佳工具。我们将使用它为我们的数据库创建模式并为我们的数据库模型生成 TypeScript 类型。

<code>npm install @prisma/client
 npm install prisma --save-dev
 </code>

### 建筑应用 ###

1.  上传文件
2.  为文档生成链接
3.  查看文件

#### \#1 将文档上传到 Vercel Blob ####

第一站是文件上传。在这里，我们将为用户将他们的文件上传到我们的平台奠定基础。这个过程包括创建一个上传文件的接口，利用 Next.js 和 Vercel Blob 来存储这些文档，以及实现处理这些文件的功能。

<code>// pages/upload.tsx
 // this is a simplified example of a file upload form in Next.js
 import { useState } from "react";
 
 export default function Form() {
 const [currentFile, setCurrentFile] = useState<File | null>(null);
 
 const handleSubmit = async (event: any) => {
 event.preventDefault();
 
 // code to send the file to a serverless API function `/api/upload` 
 // to upload to Vercel Blob 
 };
 
 return (
 <form onSubmit={handleSubmit}>
 <h2>Upload a document</h2>
 
 <label>Upload a document</label>
 <input type="file" onChange={(e) => setCurrentFile(e.target.files?.[0] || null)} />
 
 <label>Name</label>
 <input type="text" placeholder="Acme Presentation" />
 
 <button type="submit">Upload document</button>
 </form>
 );
 }
 
 </code>

<code>// pages/api/upload.ts
 import * as vercelBlob from "@vercel/blob";
 import { NextResponse, NextRequest } from "next/server";
 
 export const config = {
 runtime: "edge",
 };
 
 export default async function upload(request: NextRequest) {
 const form = await request.formData();
 const file = form.get("file") as File;
 
 const blob = await vercelBlob.put(file.name, file, { access: "public" });
 
 return NextResponse.json(blob);
 }
 </code>

![a0a8344fd13175dcc0efab9f4f67de82.png][]

#### \#2 生成文档链接 ####

解决了上传问题后，让我们将目光投向下一个里程碑：为上传的文档生成一个唯一链接。这就是我们允许用户与他人共享文档的方式。从本质上讲，我们需要创建一个系统，其中每个文档都对应于我们应用程序上的唯一 URL。

<code>// pages/api/create-link.ts
 import { NextApiRequest, NextApiResponse } from "next";
 import prisma from "@/lib/prisma";
 
 export default async function handle(req: NextApiRequest, res: NextApiResponse) {
 if (req.method === "POST") {
 const { name, url } = req.body;
 
 const document = await prisma.document.create({
 data: {
 name,
 url,
 link: {
 create: {},
 },
 },
 include: {
 link: true,
 }
 });
 
 return res.status(201).json({ document });
 }
 }
 
 </code>

当文档上传到 Vercel Blob 时，我们会将 blob URL（对该文档的引用）连同该文档的唯一标识符（如 UUID）一起存储在我们的 Postgres 数据库中。当有人导航到我们平台上包含此标识符的 URL 时，我们会从 Postgres 获取相应的 blob URL 并使用它来加载文档。

#### \#3 查看文档 ####

上传文档并生成唯一链接后，我们进入了任务的最后阶段：查看文档。我们需要为用户创建一种方式来查看他们通过唯一链接访问的文档。

我们可以通过创建一个与我们的文档链接的 URL 模式相匹配的新 Next.js 页面来做到这一点。此页面将使用 URL 中的文档标识符从我们的 Postgres 数据库中获取 blob URL，并从 Vercel Blob 加载文档。

<code>// pages/view/[linkId].tsx
 // this is a simple example of a Next.js page that loads a document
 import React, {useEffect, useState} from 'react'
 import {useRouter} from 'next/router'
 
 const ViewDocumentPage = () => {
 const router = useRouter()
 const { linkId } = router.query
 const [documentURL, setDocumentURL] = useState(null)
 
 useEffect(() => {
 // code to fetch the document URL from Postgres using linkUUID
 // and then set it as documentURL
 }, [linkUUID])
 
 if (!documentURL) {
 return <div>Loading...</div>
 }
 
 return <iframe src={documentURL} width="100%" height="100%" />
 }
 
 export default ViewDocumentPage
 
 </code>

### 结论 ###

就这样，我们的编码冒险结束了。我们共同构建了 DocSend 的简单开源替代方案，利用了 Next.js 和 Vercel Blob 的强大功能。它允许用户上传、共享和查看文档，类似于许多商业平台，但具有我们的自定义功能。

感谢您阅读。我是 Marc，一名开源爱好者。我正在构建[papermark.io][] \- DocSend 的动态开源替代品。

对我来说，编码就是不断探索和学习。  
快乐编码，朋友们！

[bd8ba7acb896fbcba283197ced63cf35.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/cb9a59360ec44bba91fe543a83d1ad75.gif
[b4fc107e00fd2f58a94de8a9c61ee958.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/b21d1905c4494cb3941228f122557281.png
[Storage _ Dashboard _ Vercel]: https://zhifj.com
[a67783b56801ec20121039e373f0a540.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/701f090beb354d3d8d3c2d641fd0271e.png
[0c749bed0654add9614549822c9a5acf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/e93a6d34f1e140149f3546ee7e22f2c6.png
[a0a8344fd13175dcc0efab9f4f67de82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/02/ba486b79302348198ca34a5a7aff7293.png
[papermark.io]: http://telegeram1.com