A guide for creating a new Next.js application with PowerSync for offline/local first functionality
create-next-app
.
next.config.ts
to use Webpack. This is done because we need to enable:@powersync/react
, which provides several hooks and providers for easier integration.
next.config.ts
to support PowerSync.
asyncWebAssemply
in Webpack, topLevelAwait
is required and for Web Workers, ensure proper file handling.
It’s also important to add web assembly files to static assets for the site. We will not be using SSR because PowerSync does not support it.
Run pnpm dev
to start the development server and check that everything compiles correctly, before moving onto the next section.
./src/lib
named powersync
.
AppSchema
AppSchema.ts
in the newly created powersync
directory and add your App Schema to the file. Here is an example of this.
BackendConnector
BackendConnector.ts
in the powersync
directory and add the following to the file.
fetchCredentials()
- Used to return a JWT token to the PowerSync service for authentication.uploadData()
- Used to upload changes captured in the local SQLite database that need to be sent to the source backend database, in this case Supabase. We’ll get back to this further down..env
file to our project which will contain two variables:
NEXT_PUBLIC_POWERSYNC_URL
- This is the PowerSync instance url. You can grab this from the PowerSync Cloud dashboard.NEXT_PUBLIC_POWERSYNC_TOKEN
- For development purposes we’ll be using a development token. To generate one, please follow the steps outlined in Development Token from our installation docs../src/app/components
named providers
SystemProvider
providers
directory called SystemProvider.tsx
.
SystemProvider
will be responsible for initializing the PowerSyncDatabase
. Here we supply a few arguments, such as the AppSchema we defined earlier along with very important properties such as ssrMode: false
.
PowerSync will not work when rendered server side, so we need to explicitly disable SSR.
We also instantiate our BackendConnector
and pass an instance of that to db.connect()
. This will connect to the PowerSync instance, validate the token supplied in the fetchCredentials
function and then start syncing with the PowerSync service.
providers
directory called DynamicSystemProvider.tsx
.
ssr:false
layout.tsx
layout.tsx
we’ll update the RootLayout
function to use the DynamicSystemProvider
created in the last step.
page.tsx
we can now use the useQuery
hook or other PowerSync functions to read data from the SQLite database and render the results in our application.
execute
function we can also write data into our local SQLite database.
uploadData
in the BackendConnector class.