/nextjs-with-sqljs-example

A demonstration of how to use sql.js with next.js v12.1.6.

Primary LanguageJavaScript

Next.js with sql.js 🐳

This is a barebone example of how to use sql.js in Next.js.

sql.js is SQLite compiled to WebAssembly. This enables SQLite to run entirely in the browser. ✨

This repo is largely based on @lovasoa's react-sqljs-demo example.

Working Example 🔥

https://nextjs-with-sqljs-example.vercel.app/

Tricks to make sql.js work in Next.js 🍉

There are two primary differences compared to the react-sqljs-demo example.

Trick 1: Webpack config (next.config.js)

This example doesn't utilize craco to provide a custom webpack configuration. Instead, we add a custom webpack configuration in next.config.js to not include a polyfill for the fs module.

// next.config.js
module.exports = {
  webpack: (config, { isServer, webpack }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }

    return config;
  },
};

Trick 2: Retrieve wasm file from CDN

The wasm file is retrieved from a CDN when initializing sql.js.

initSqlJs({
  locateFile: (file) => `https://sql.js.org/dist/${file}`,
});

Running locally 🏃🏻

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Credits

@lovasoa - react-sqljs-demo example