NextJS를 사용한 CloudScape 설계

2022년 7월 19일부터 Amazon Web Services는 디자인 시스템을 구현하는 React 구성 요소 라이브러리와 함께 디자인 시스템을 오픈 소스로 출시했습니다. 이 블로그 게시물은 디자인 시스템에 대한 간략한 개요와 이를 NextJS와 함께 사용하는 방법입니다.

클라우드스케이프란?

Cloudscape Design System은 규모에 맞게 직관적이고 매력적이며 포용적인 사용자 경험을 구축하기 위한 오픈 소스 솔루션입니다. Cloudscape는 구현을 간소화하기 위한 디자인 리소스 및 프런트 엔드 구성 요소와 함께 웹 애플리케이션을 만들기 위한 광범위한 지침 세트로 구성됩니다.
Cloudscape는 Amazon Web Services(AWS) 제품 및 서비스용으로 구축되었으며 사용됩니다. 그들은 2016년에 AWS 서비스가 소유한 웹 애플리케이션 전체에서 사용자 경험을 개선하고 팀이 해당 애플리케이션을 더 빠르게 구현할 수 있도록 돕기 위해 이 서비스를 만들었습니다.

Cloudscapehere에 대한 자세한 내용을 읽을 수 있습니다.

이것은 아름다운 디자인 시스템이며 즉시 사용 가능한 구성 요소 기능 측면에서 많은 것을 제공합니다. 모든 사람이 사용해 보도록 적극 권장합니다.

클라우드스케이프 설치

NextJS 사용자의 경우 다음 명령을 실행하여 Cloudscape를 설치할 수 있습니다.

npm install @cloudscape-design/global-styles @cloudscape-design/components

NextJS와 CloudScape 통합

다음으로 이를 애플리케이션에 통합해야 합니다. 먼저 CloudScape 전역 스타일 패키지를 앱으로 가져옵니다. pages/_app.{jsx,tsx} 파일에서 이 작업을 수행해 보겠습니다.

import '@cloudscape-design/global-styles'

전역 스타일을 포함시킨 후 응용 프로그램에서 일부 구성 요소를 사용해 보겠습니다.

import { useState } from 'react'
import Header from '@cloudscape-design/components/header'
import Container from '@cloudscape-design/components/container'
import SpaceBetween from '@cloudscape-design/components/space-between'
import Input from '@cloudscape-design/components/input'
import Button from '@cloudscape-design/components/button'

export default function Home() {
  const [value, setValue] = useState('')

  return (
    <SpaceBetween size="m">
      <Header variant="h1">Hello World!</Header>

      <Container>
        <SpaceBetween size="s">
          <span>Start editing to see some magic happen</span>
          <Input value={value} onChange={(event) => setValue(event.detail.value)} />
          <Button variant="primary">Click me</Button>
        </SpaceBetween>
      </Container>
    </SpaceBetween>
  )
}

그것을 실행하고 무슨 일이 일어나는지보십시오.



이 오류는 기본 CSS 모듈을 구현하는 NextJS로 인해 발생합니다. NextJS 플러그인을 사용하여 스타일을 NextJS가 이해할 수 있는 기본 CSS 모듈로 변환하여 이 문제를 해결할 수 있습니다.

npm install -D next-transpile-modules next-compose-plugins

플러그인을 설치한 후 다음과 같이 수정next.config.js해야 합니다.

const withTranspileModules = require('next-transpile-modules')
const withPlugins = require('next-compose-plugins')

const nextConfig = {
  // other config options
}

// Here we will add a plugin to our configuration to transpile the CloudScape components into
module.exports = withPlugins([withTranspileModules(['@cloudscape-design/components'])], nextConfig)

보너스, typescript를 사용하는 경우 파일next.config.js은 다음과 같아야 합니다.

const withTM = require('next-transpile-modules')(['@cloudscape-design/components']);

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

const buildConfig = _phase => {
  const plugins = [withTM]
  const config = plugins.reduce((acc, next) => next(acc), {
    ...nextConfig
  })
  return config
}

module.exports = buildConfig();

NextJS 개발 서버를 다시 시작하면 더 이상 오류 메시지가 표시되지 않습니다. 다음 출력도 표시됩니다.



와우, 작동하는 것 같습니다! 그러나 잠시만 기다리십시오. 일부 오류 메시지가 여전히 콘솔에 표시됩니다.

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at InternalContainer (webpack-internal:///./node_modules/@cloudscape-design/components/container/internal.js:32:21)
    at Container (webpack-internal:///./node_modules/@cloudscape-design/components/container/index.js:24:17)

이는 Cloudscape가 useLayoutEffect 후크를 사용하여 구성 요소를 렌더링하기 때문입니다.
그리고 useLayoutEffect 후크는 서버 렌더러에서 지원되지 않습니다.
Cloudscape 팀은 현재 useLayoutEffect를 교체할 계획이 없습니다.
이에 대한 자세한 내용을 읽을 수 있습니다here.

이 문제를 해결하려면 _app.js에 추가하면 됩니다.

import React from 'react'
if (typeof window === 'undefined') React.useLayoutEffect = () => {}

그게 다야, 우리는 갈 수있어! 이제 코드가 예상대로 작동합니다.

읽어 주셔서 감사합니다! 이 정보가 도움이 되었기를 바랍니다. :)

GitHub에서 사용 가능한 코드