Next.js 및 Appwrite를 사용하여 웹 앱 빌드

이 블로그 자습서에서는 완전히 처음부터 웹 앱 Next.js 및 Appwrite를 빌드할 것입니다.

라이브 데모 - Made with Appwrite 💙
Github - harisarang/madewithappwrite

1단계: ▶️ Appwrite 초기화 및 Next.js 프로젝트 생성

Digital ocean을 사용하여 Appwrite 인스턴스를 호스팅했습니다.(다른 호스팅 옵션을 자유롭게 탐색해 보세요.)

먼저 디지털 바다(최소 2GB RAM/2vCPU)에 물방울을 만들고,

appwrite를 설치하려면 다음 명령을 실행합니다(인스턴스에 도커가 설치되어 있는지 확인).

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:0.11.0

브라우저에서 VM의 IP 주소를 사용하여 Appwrite 콘솔에 액세스하거나 Droplet IP 주소를 가리키는 DNS "A 레코드"를 추가하고 해당 도메인을 사용하여 콘솔에 액세스할 수 있습니다.



이제 create-next-app를 사용하여 Next.js 프로젝트를 생성합니다.

npx create-next-app -e with-tailwindcss madewithappwrite

그런 다음 프로젝트에 appwrite js 패키지를 설치합니다.

npm install appwrite

2단계: 🔗 Appwrite로 다음 앱 연결

Appwrite 콘솔에서 madewithappwrite 라는 새 프로젝트를 만듭니다.

그런 다음 Appwrite에 새로운 웹 플랫폼을 등록합니다. 개발용으로 추가localhost하고 프로덕션용으로 도메인 이름으로 새 웹 플랫폼을 등록합니다.





이 프로젝트에서는 OAuth와 이메일 및 비밀번호 대신 익명의 사용자를 사용할 것입니다.

이제 👇 아래의 API 래퍼를 사용하여 appwrite 서버와 다양한 작업을 수행합니다. (다양한 기능을 추가하여 확장할 수도 있습니다.)

// Create a new file under lib/appwrite.js
import { Appwrite } from "appwrite";

let api = {
  sdk: null,

  provider: () => {
    if (api.sdk) {
      return api.sdk;
    }
    let appwrite = new Appwrite();
    appwrite
      .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_URL)
      .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT);
    api.sdk = appwrite;
    return appwrite;
  },

  createSession: (email, password) => {
    return api.provider().account.createAnonymousSession();
  },

  deleteCurrentSession: () => {
    return api.provider().account.deleteSession("current");
  },

  createDocument: (collectionId, data, read, write) => {
    return api
      .provider()
      .database.createDocument(collectionId, data, read, write);
  },

  listDocuments: (collectionId) => {
    return api.provider().database.listDocuments(collectionId);
  },

  getDocument: (collectionId, documentId) => {
    return api.provider().database.getDocument(collectionId, documentId);
  },

  updateDocument: (collectionId, documentId, data, read, write) => {
    return api
      .provider()
      .database.updateDocument(collectionId, documentId, data, read, write);
  },

  deleteDocument: (collectionId, documentId) => {
    return api.provider().database.deleteDocument(collectionId, documentId);
  }
};

export default api;

.env.local라는 새 파일을 만들고,

NEXT_PUBLIC_APPWRITE_URL=http://<your-ip-address>/v1
NEXT_PUBLIC_APPWRITE_PROJECT=<your-project-id>

프로젝트의 설정 아래에 있는 appwrite 콘솔에서 사용자project-id를 찾을 수 있습니다.



예이 🥳 ! Next App을 Appwrite와 성공적으로 연결했습니다.

3단계: 👩‍💻 사용자 세션 관리

이 프로젝트에서는 익명의 사용자를 사용하겠습니다(다른 옵션도 자유롭게 살펴보세요!).
다른 옵션을 탐색할 수 있습니다here!

이제 웹 앱에 도착할 때 익명 사용자 세션을 생성합니다. 즉, pages/_app.js 반응 후크를 사용하여 useEffect 아래에 새 사용자를 생성합니다.

import "tailwindcss/tailwind.css";
import "../styles/global.css";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { useEffect } from "react";
import api from "../lib/appwrite";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    api
      .createSession()
      .then((response) => {
        console.log(response);
      })
      .catch((err) => console.log(err));
  }, []);
  return (
    <div>
      <Navbar />
      <Component {...pageProps} />
      <Footer />
    </div>
  );
}

export default MyApp;

4단계: 🔁 Appwrite에서 게시물 작성 및 보기

게시물을 작성하려면 먼저 데이터베이스에서 appwrite 콜렉션을 작성하십시오.

컬렉션의 settings에서 다음 👇 규칙(데이터베이스의 열)을 추가합니다. 컬렉션 세부 정보는 JSON here에서 확인하세요.



다음 앱에서 양식을 만들고 양식의 onSumbit 부분에서 api.createDocument() 함수를 호출합니다.

양식 상태를 관리하기 위해 react-hook-form 을 사용했습니다.

// pages/submit.js

const example_object = {
  title: "title",
  github: "github-url",
  desc: "Description",
  tags: "tags",
  url: "url-to-project",
  appwrite: "appwrite-tags",
  email: "email",
}

...
const updatePost = async (object) => {
    console.log(object);
    api
      .createDocument(
        process.env.NEXT_PUBLIC_APPWRITE_PROJECT_COLLECTION,
        object,
        ["*"],
        ["*"]
      )
      .then((response) => {
        console.log(response);
        console.log("Sumbitted project successfully");
        router.push("/");
      })
      .catch((err) => {
        console.log(err);
        console.log(
          "Unable to submit project to server."
        );
      });
  };
...

컬렉션에서 목록 프로젝트를 검색하려면 래퍼에서 api.listDocuments()를 사용하십시오. 이제 pages/index.js에서 모든 프로젝트를 검색합니다.

// pages/index.js

...
  const [projects, setProjects] = useState([]);

  useEffect(() => {   
   api.listDocuments("collection-id")
      .then((response) => {
        console.log(response);
        setProjects([...response.documents.reverse()]);
      });
  }, []);

  return (
    <div>
      {projects.map((project) => {
         // Render a card component for the card here ...
      })}
    </div>
 );

끝입니다!✊. 이제 성공적으로 🏆 Next.js 및 Appwrite를 사용하여 웹 앱을 만들었습니다 🎉.