UI Web
How to use
in Nextjs
pages/_document.ts
import Document, {DocumentProps, Head, Html, Main, NextScript} from 'next/document'
import {createElement as h} from 'react'
export interface Props extends DocumentProps {
}
class CustomDocument extends Document<Props> {
render() {
// csp nonce
const nonce = 'xxxxxx'
return (
h(Html, null,
h(Head, {nonce})
h('body', null,
h(SSRCache, {nonce},
h(Main)
)
h(NextScript)
)
)
)
}
}pages/_app.ts
import {UI} from '@caredoc/ui-web'
// next ssr 에서 css는 _app.ts 에서 모두 불러주어야 합니다. nextjs 는 css 정리해주는 기능이 없기때문에 어쩔수 없습니다.
import '@caredoc/ui-web/assets/icons/caredoc-font.css'
import '@caredoc/ui-web/assets/css/font.css'
function MyApp() {
const {
/**
* a page component
*/
Component,
/**
* pageProps in <body> -> <script id="__NEXT_DATA__" type="application/json">
*/
pageProps,
} = props
return (
<>
<UI>
<Component {...pageProps} />
</UI>
</>
)
}
export default MyApppages/index.ts
import {Box} from '@caredoc/ui-web'
function IndexPage() {
return (
<Box>foo</Box>
)
}