# Using Spreadsheet with NextJS

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>

```tsx
"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
```

```typescript
/** @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`

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

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

```sh
yarn add @rowsncolumns/tailwindcss-preset --dev

// or 
npm install @rowsncolumns/tailwindcss-preset
```

Update tailwindcss content and add the preset

```javascript
// 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"
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rowsncolumns.app/configuration/using-spreadsheet-with-nextjs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.