[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

NextJS

SpreadJS 디자이너 컴포넌트는 Windows, Linux 및 Mac과 같은 다양한 플랫폼용 웹 애플리케이션을 개발할 수 있는 React 기반 프레임워크인 NextJS를 지원합니다. NextJS는 TypeScript 지원, 하이브리드 정적 및 서버 렌더링, 경로 사전 가져오기, 스마트 번들링 등 프로덕션에 필요한 모든 기능을 제공합니다.

자세한 내용은 https://nextjs.org/docs/getting-started을 참조하세요.

이 튜토리얼에서는 SpreadJS 디자이너 컴포넌트를 사용하는 Next.js 애플리케이션을 빌드합니다.

참고: 이제 SpreadJS 디자이너 컴포넌트는 NextJS 버전 16을 지원합니다. Next.js 애플리케이션을 만들려면 설치된 Node.js 버전이 20.9 이상인지 확인하세요.

Next.js 앱 만들기

Next.js 애플리케이션을 만드는 가장 쉬운 방법은 CLI 도구에서 create-next-app 명령을 사용하는 것입니다.

프로젝트를 만들기 전에 Node.js와 npm이 설치되어 있는지 확인하세요. 다음 명령을 사용하여 설치된 버전을 확인할 수 있습니다.

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 프로젝트를 만듭니다.

npx create-next-app@latest

  1. nextjs-with-spreadjs-designer와 같은 프로젝트 이름을 입력합니다.

  2. 종속성 설치가 완료되면 터미널에 다음 명령을 입력하여 프로젝트를 시작합니다.

cd nextjs-with-spreadjs-designer
npm run dev

  1. 브라우저에서 http://localhost:3000을 엽니다. 그러면 NextJS 시작 페이지가 표시됩니다.

  2. 현재 터미널을 닫고 Visual Studio Code 또는 IDE를 사용하여 nextjs-with-spreadjs-designer 폴더를 엽니다.

SpreadJS 디자이너 컴포넌트 설치

  1. SpreadJS 디자이너 컴포넌트 패키지를 설치합니다.

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

  1. designer.tsx라는 TypeScript 파일을 만들고 app 폴더에 추가한 다음 다음 코드를 입력합니다.

'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 (
        <Designer
            styleInfo={styleInfo}
            designerInitialized={(designer: GCD.Spread.Sheets.Designer.Designer) => {
                const workbook = designer.getWorkbook() as GC.Spread.Sheets.Workbook;
                const sheet = workbook.getActiveSheet();
                sheet.setValue(1, 1, 'Test');
            }}>
        </Designer>);
}

  1. 인덱스 파일의 내용을 변경합니다. app/page.tsx 파일의 기본 내용을 다음 코드로 바꿉니다.

'use client';
import dynamic from "next/dynamic";

const SpreadJSDesigner = dynamic(
  () => {
    return import("./designer");
  },
  { ssr: false }
);

export default function Home() {
  return (
    <div>
      <h1>
        Next.JS 16 + SpreadJS Designer Component demo
      </h1>
      <SpreadJSDesigner />
    </div>
  )
}

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 코어 패키지를 가져오는 것이 좋습니다.

import GC from "@mescius/spread-sheets";
import GCD from "@mescius/spread-sheets-designer";

네임스페이스 import 형식은 사용하지 않는 것이 좋습니다.

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를 애플리케이션으로 가져옵니다.

@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/에서 실행됩니다.

image-20260707.a185b6.png