Using Spreadsheet with NextJS

SSR is supported, but Server components, not yet

Add use client at the top of your file, so this component will be part of client bundle

More info here - https://beta.nextjs.org/docs/rendering/server-and-client-components#convention

"use client";
import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
import { SpreadsheetProvider, CanvasGrid } from "@rowsncolumns/spreadsheet";

export const Sheet = () => {
  return (
    <SpreadsheetProvider>
      <CanvasGrid />
    </SpreadsheetProvider>
  );
};

Loading Canvas in Node

NextJS throws error while compiling canvas during SSR. If you see these errors,

Error: Module not found: Can't resolve 'canvas'
Did you mean './canvas'?

ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

the solution would be to install canvas and add it as an external module in nextJS

yarn add canvas --dev

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack (config) {
    config.externals.push('canvas')
    return config
  }
}

module.exports = nextConfig

CSS Specificity when importing stylesheet

NextJS does not respect the order of CSS imports. So there could be style conflicts if you are using tailwindcss in a nextJS project.

The proposed solution is in tailwindcss v3 is

1. Install postcss-import and add it to your postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

1. Import spreadsheet style using the import statement

@import "tailwindcss/base";
@import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";

@tailwind components;
@tailwind utilities;

Credit to https://github.com/radix-ui/themes/issues/109#issuecomment-1747345743 for the fix

In tailwindcss v4

@import "tailwindcss";
@import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css" layer(components);;

(Optional) Using tailwindcss preset to configure spreadsheet styles

If you are still having problems with conflicting css in nextjs, this is another way to solve it.

Install the rowsncolumns tailwind preset

yarn add @rowsncolumns/tailwindcss-preset --dev

// or 
npm install @rowsncolumns/tailwindcss-preset

Update tailwindcss content and add the preset

// tailwind.config.js
content: [
   ...// your files
   "./node_modules/@rowsncolumns/*/dist/**/*.js"
],
presets: [
  require('@rowsncolumns/tailwindcss-preset')
]

Import spreadsheet css variables

Add a css file spreadsheet.css and add contents from https://github.com/rowsncolumns/spreadsheet/blob/main/apps/spreadsheet/spreadsheet.css

Import this css file in global.css

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./spreadsheet.css"