본문 바로가기
WIKI 기술 지식 베이스

Next.js + Turso

원문 보기 위키 갱신

Next.js 프로젝트에 Turso를 몇 분 만에 세팅하는 방법이에요. SDK 설치부터 자격 증명 설정, 클라이언트 구성, SQL 실행까지 순서대로 따라오세요.

출처: 문서

본문

Prerequisites

시작하기 전에 다음을 확인하세요:

Install the libSQL SDK

@libsql/client 패키지를 설치하면 돼요: npm install @libsql/client

Configure database credentials

데이터베이스 자격 증명(URL과 인증 토큰)을 받아서 환경 변수로 저장해 두세요.

Configure libSQL client

import { createClient } from "@libsql/client";

export const turso = createClient({
  url: process.env.TURSO_DATABASE_URL,
  authToken: process.env.TURSO_AUTH_TOKEN,
});

Execute SQL

App Router

import { turso } from "@/lib/turso";

export default async function Page() {
  const { rows } = await turso.execute("SELECT * FROM table_name");

  return (
    <ul>
      {rows.map((row) => (
        <li key={row.id}>{row.id}</li>
      ))}
    </ul>
  );
}

Pages Directory

import type { InferGetServerSidePropsType, GetServerSideProps } from "next";

import { turso } from "@/lib/turso";

export const getServerSideProps = (async () => {
  const { rows } = await turso.execute("SELECT * FROM table_name");

  return {
    props: {
      rows,
    },
  };
}) satisfies GetServerSideProps<{ rows: any[] }>;

export default function Page({
  rows,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <ul>
      {rows.map((row) => (
        <li key={row.id}>{row.id}</li>
      ))}
    </ul>
  );
}

Examples

Full Stack App — Next.js, Turso, Drizzle ORM으로 만들어 보세요.

더 알아보기 (Learn more)