Next.js + PowerSync

{
  "scripts": {
    "postinstall": "powersync-web copy-assets -o public"
  }
}

module.exports = {
  images: {
    disableStaticImages: true
  },
  turbopack: {}
};

module.exports = {
    webpack: (config: any, { isServer }: any) => {
        config.experiments = {
            ...config.experiments,
            asyncWebAssembly: true,
            topLevelAwait: true,
        };

        if (!isServer) {
            config.module.rules.push({
                test: /\.wasm$/,
                type: "asset/resource",
            });
        }

        return config;
    }
}

import { column, Schema, Table } from '@powersync/web';

const lists = new Table({
  created_at: column.text,
  name: column.text,
  owner_id: column.text
});

const todos = new Table(
  {
    list_id: column.text,
    created_at: column.text,
    completed_at: column.text,
    description: column.text,
    created_by: column.text,
    completed_by: column.text,
    completed: column.integer
  },
  { indexes: { list: ['list_id'] } }
);

export const AppSchema = new Schema({
  todos,
  lists
});

// For types
export type Database = (typeof AppSchema)['types'];
export type TodoRecord = Database['todos'];
// OR:
// export type Todo = RowType<typeof todos>;
export type ListRecord = Database['lists'];

import { AbstractPowerSyncDatabase, PowerSyncBackendConnector, UpdateType } from '@powersync/web';

export class BackendConnector implements PowerSyncBackendConnector {
    private powersyncUrl: string | undefined;
    private powersyncToken: string | undefined;

    constructor() {
        this.powersyncUrl = process.env.NEXT_PUBLIC_POWERSYNC_URL;
        // This token is for development only.
        // For production applications, integrate with an auth provider or custom auth.
        this.powersyncToken = process.env.NEXT_PUBLIC_POWERSYNC_TOKEN;
    }

    async fetchCredentials() {
        // TODO: Use an authentication service or custom implementation here.
        if (this.powersyncToken == null || this.powersyncUrl == null) {
            return null;
        }

        return {
            endpoint: this.powersyncUrl,
            token: this.powersyncToken
        };
    }

    async uploadData(database: AbstractPowerSyncDatabase): Promise<void> {
        const transaction = await database.getNextCrudTransaction();

        if (!transaction) {
            return;
        }

        try {
            for (const op of transaction.crud) {
              // The data that needs to be changed in the remote db
              const record = { ...op.opData, id: op.id };
              switch (op.op) {
                case UpdateType.PUT:
                  // TODO: Instruct your backend API to CREATE a record
                  break;
                case UpdateType.PATCH:
                  // TODO: Instruct your backend API to PATCH a record
                  break;
                case UpdateType.DELETE:
                  //TODO: Instruct your backend API to DELETE a record
                  break;
              }
            }
            await transaction.complete();
        } catch (error: any) {
            console.error(`Data upload error - discarding`, error);
            await transaction.complete();
        }
    }
}

'use client';

import { AppSchema } from '@/lib/powersync/AppSchema';
import { BackendConnector } from '@/lib/powersync/BackendConnector';
import { PowerSyncContext } from '@powersync/react';
import { PowerSyncDatabase, WASQLiteOpenFactory, createBaseLogger, LogLevel } from '@powersync/web';
import React, { Suspense } from 'react';

const logger = createBaseLogger();
logger.useDefaults();
logger.setLevel(LogLevel.DEBUG);

let dbInstance: PowerSyncDatabase | null = null;

function getDB(): PowerSyncDatabase {
  if (dbInstance) return dbInstance;

  dbInstance = new PowerSyncDatabase({
    database: new WASQLiteOpenFactory({
      dbFilename: 'powersync.db',
      // Use the pre-bundled worker from public/@powersync/
      // This is required since Turbopack doesn't support dynamic imports of workers yet
      worker: '/@powersync/worker/WASQLiteDB.umd.js'
    }),
    schema: AppSchema,
    flags: { disableSSRWarning: true },
    // Use the pre-bundled sync worker from public/@powersync/
    sync: { worker: '/@powersync/worker/SharedSyncImplementation.umd.js' },
    logger
  });

  dbInstance.connect(new BackendConnector());
  return dbInstance;
}

export function PowerSyncProvider({ children }: { children: React.ReactNode }) {
  return (
    <Suspense>
      <PowerSyncContext.Provider value={getDB()}>{children}</PowerSyncContext.Provider>
    </Suspense>
  );
}

import type { Metadata } from 'next';
import { PowerSyncProvider } from '@/lib/powersync/PowerSyncProvider';
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: 'PowerSync Next.js Example'
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        <PowerSyncProvider>{children}</PowerSyncProvider>
      </body>
    </html>
  );
}

'use client';

import { useState, useEffect } from 'react';
import { useQuery, useStatus, usePowerSync } from '@powersync/react';

export default function Page() {
    // Hook
    const powersync = usePowerSync();

    // Get database status information e.g. downloading, uploading and lastSycned dates
    const status = useStatus();

    // Example 1: Reactive Query
    const { data: lists } = useQuery("SELECT * FROM lists");

    // Example 2: Standard query
    const [lists, setLists] = useState([]);
    useEffect(() => {
        powersync.getAll('SELECT * from lists').then(setLists)
    }, []);

    return (
    <ul>
      {lists.map(list => <li key={list.id}>{list.name}</li>)}
    </ul>
  )
}