# NextJS
## Content
SpreadJS 디자이너 컴포넌트는 Windows, Linux 및 Mac과 같은 다양한 플랫폼용 웹 애플리케이션을 개발할 수 있는 React 기반 프레임워크인 NextJS를 지원합니다. NextJS는 TypeScript 지원, 하이브리드 정적 및 서버 렌더링, 경로 사전 가져오기, 스마트 번들링 등 프로덕션에 필요한 모든 기능을 제공합니다.
자세한 내용은 [https://nextjs.org/docs/getting-started](https://nextjs.org/docs/getting-started "https://nextjs.org/docs/getting-started")을 참조하세요.
이 튜토리얼에서는 SpreadJS 디자이너 컴포넌트를 사용하는 Next.js 애플리케이션을 빌드합니다.
>type=note
> **참고**: 이제 SpreadJS 디자이너 컴포넌트는 NextJS 버전 16을 지원합니다. Next.js 애플리케이션을 만들려면 설치된 Node.js 버전이 20.9 이상인지 확인하세요.
## Next.js 앱 만들기
Next.js 애플리케이션을 만드는 가장 쉬운 방법은 CLI 도구에서 `create-next-app` 명령을 사용하는 것입니다.
프로젝트를 만들기 전에 Node.js와 npm이 설치되어 있는지 확인하세요. 다음 명령을 사용하여 설치된 버전을 확인할 수 있습니다.
```bash
node -v
npm -v
```
`npx create-next-app@latest` 명령은 `create-next-app`을 자동으로 다운로드하고 실행하므로 `create-next-app`을 전역으로 설치할 필요가 없습니다. npm create 명령인 `npm create next-app@latest`를 사용할 수도 있습니다.
1. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 Next.js TypeScript 프로젝트를 만듭니다.
```bash
npx create-next-app@latest
```
2. *nextjs-with-spreadjs-designer*와 같은 프로젝트 이름을 입력합니다.
3. 종속성 설치가 완료되면 터미널에 다음 명령을 입력하여 프로젝트를 시작합니다.
```bash
cd nextjs-with-spreadjs-designer
npm run dev
```
4. 브라우저에서 http://localhost:3000을 엽니다. 그러면 NextJS 시작 페이지가 표시됩니다.
5. 현재 터미널을 닫고 Visual Studio Code 또는 IDE를 사용하여 *nextjs-with-spreadjs-designer* 폴더를 엽니다.
## SpreadJS 디자이너 컴포넌트 설치
1. SpreadJS 디자이너 컴포넌트 패키지를 설치합니다.
```bash
npm install @mescius/spread-sheets @mescius/spread-sheets-io @mescius/spread-sheets-barcode @mescius/spread-sheets-charts @mescius/spread-sheets-languagepackages @mescius/spread-sheets-pdf @mescius/spread-sheets-print @mescius/spread-sheets-shapes @mescius/spread-sheets-tablesheet @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-designer @mescius/spread-sheets-designer-resources-en @mescius/spread-sheets-designer-react
```
2. *designer.tsx*라는 TypeScript 파일을 만들고 app 폴더에 추가한 다음 다음 코드를 입력합니다.
```typescript
'use client';
import React, { useState } from "react";
import GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-io";
import "@mescius/spread-sheets-barcode";
import "@mescius/spread-sheets-charts";
import "@mescius/spread-sheets-languagepackages";
import "@mescius/spread-sheets-pdf";
import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-designer-resources-en";
import GCD from "@mescius/spread-sheets-designer";
import { Designer } from "@mescius/spread-sheets-designer-react";
// Optional: Set your SpreadJS license key and Designer Component license key
// GC.Spread.Sheets.LicenseKey = "your-spreadjs-license-key";
// GCD.Spread.Sheets.Designer.LicenseKey = "your-designer-component-license-key";
export default function SpreadJSDesigner() {
const [styleInfo, setStyleInfo] = useState({
width: '100%',
height: '90vh'
});
return (
{
const workbook = designer.getWorkbook() as GC.Spread.Sheets.Workbook;
const sheet = workbook.getActiveSheet();
sheet.setValue(1, 1, 'Test');
}}>
);
}
```
3. 인덱스 파일의 내용을 변경합니다. *app/page.tsx* 파일의 기본 내용을 다음 코드로 바꿉니다.
```typescript
'use client';
import dynamic from "next/dynamic";
const SpreadJSDesigner = dynamic(
() => {
return import("./designer");
},
{ ssr: false }
);
export default function Home() {
return (
Next.JS 16 + SpreadJS Designer Component demo
)
}
```
>type=note
> SpreadJS 디자이너 컴포넌트는 브라우저 전용 API(`window`, `document`, Canvas)를 사용하므로 `ssr: false`와 함께 `next/dynamic`을 사용해야 합니다. SpreadJSDesigner 컴포넌트에서는 SSR을 비활성화해야 합니다. `ssr: false`와 함께 사용하는 `next/dynamic`이 Client Component(`'use client'`로 표시됨) 내에서 사용되는지 확인하세요.
## Next.js 16에서 SpreadJS 가져오기
Turbopack과 함께 Next.js 16을 사용하는 경우 기본 import 구문을 사용하여 SpreadJS 코어 패키지를 가져오는 것이 좋습니다.
```auto
import GC from "@mescius/spread-sheets";
import GCD from "@mescius/spread-sheets-designer";
```
>type=warning
> 네임스페이스 import 형식은 사용하지 않는 것이 좋습니다.
>
> ```typescript
> import * as GC from "@mescius/spread-sheets";
> import * as GCD from "@mescius/spread-sheets-designer";
> ```
일부 Next.js 16 환경에서는 네임스페이스 import를 사용하면 SpreadJS 추가 기능 패키지(예: Pivot 또는 Report)가 `GC` 개체를 올바르게 확장하지 못할 수 있습니다. 그 결과 해당 추가 기능 패키지가 설치되어 있어도 특정 네임스페이스(예: `GC.Spread.Pivot` 또는 `GC.Spread.Report`)가 정의되지 않은 것으로 표시될 수 있습니다.
기본 import를 사용하면 추가 기능 모듈이 해당 기능을 SpreadJS 코어 개체에 올바르게 연결할 수 있습니다.
## 스타일 가져오기
*app* 폴더에 있는 *globals.css* 파일에 다음 줄을 추가하여 SpreadJS CSS 및 디자이너 컴포넌트 CSS를 애플리케이션으로 가져옵니다.
```css
@import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
@import '@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.light.min.css';
```
## 앱 실행 및 테스트
`npm run dev` 명령을 사용하여 애플리케이션을 실행할 수 있습니다.
기본적으로 프로젝트는 http://localhost:3000/에서 실행됩니다.
