SQLite Cloud

Next.js Quick Start Guide

In this quickstart, we will show you how to get started with SQLite Cloud and Next.js by building a simple application that connects to and reads from a SQLite Cloud database.

  1. Set up a SQLite Cloud account
    • If you haven’t already, sign up for a SQLite Cloud account and create a new project.
    • In this guide, we will use the sample datasets that come pre-loaded with SQLite Cloud.
  2. Create a Next.js app
    • Create a Next app using create-next-app. The following command creates a very simple app (JS, no Tailwind, uses the latest App Router) to keep the focus on querying the data.
npx create-next-app@latest sqlc-quickstart --js --no-tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm
  1. Install the SQLite Cloud SDK
cd sqlc-quickstart && npm install @sqlitecloud/drivers
  1. Query data
    • Replace the code in layout.js and page.js with the following snippets.
    • Click a node in your account dashboard and copy the connection string. Replace <your-connection-string> in page.js with your connection string.

In src/app/layout.js:

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

In src/app/page.js:

import { Database } from '@sqlitecloud/drivers';

async function getAlbums() {
  const db = new Database('<your-connection-string>');

  const result = await db.sql`USE DATABASE chinook.sqlite; 
  SELECT albums.AlbumId as id, albums.Title as title, artists.name as artist
  FROM albums 
  INNER JOIN artists 
  WHERE artists.ArtistId = albums.ArtistId
  LIMIT 20;`;

  return result;
}

export default async function Home() {
  const res = await getAlbums();

  return (
    <div>
      <h1>Albums</h1>
      <ul>
        {res.map(({ id, title, artist }) => (
          <li key={id}>
            {title} by {artist}
          </li>
        ))}
      </ul>
    </div>
  );
}
  1. Run your app
npm run dev
  1. View your app
    • Open your browser and navigate to the localhost link provided by the previous command to see your app data.

And that’s it! You’ve successfully built a Next app that reads data from a SQLite Cloud database.