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