nextjs-with-sqljs-example

KO | EN

gitlite — search

#javascript #ai #llm #golang #android #rust #linux #nodejs #kubernetes #vue #awesome-list #ios #mcp #open-source

nextjs-with-sqljs-example

(★ 13)

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

nextjs-with-sqljs-example Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Next.js with sql.js 🐳

This is a barebone example of how to use [sql.js](https://github.com/sql-js/sql.js) in [Next.js](https://github.com/vercel/next.js/).

[sql.js](https://github.com/sql-js/sql.js) is SQLite compiled to WebAssembly. This enables SQLite to run entirely in the browser. ✨

This repo is largely based on [@lovasoa](https://github.com/lovasoa)'s [react-sqljs-demo example](https://github.com/sql-js/react-sqljs-demo).

## Working Example 🔥

[https://nextjs-with-sqljs-example.vercel.app/](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](https://github.com/sql-js/react-sqljs-demo).

### 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.

```javascript
// 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](https://github.com/sql-js/sql.js).

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

## Running locally 🏃🏻

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Credits

[@lovasoa](https://github.com/lovasoa) - [react-sqljs-demo example](https://github.com/sql-js/react-sqljs-demo)

nextjs-with-sqljs-example

nextjs-with-sqljs-example Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

nextjs-with-sqljs-example

nextjs-with-sqljs-example Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README