# fed-e-task-04-04

**Repository Path**: frontend_site/fed-e-task-04-04

## Basic Information

- **Project Name**: fed-e-task-04-04
- **Description**:         重点介绍 React 体系下的服务端渲染方案，其中包括原生 React 实现服务端 SSR，基于 Next.js 的集成式服务端渲染开发；除此之外，我们还会一起学习目前国外社区非常火热的静态站点生成方案（SSG）：Gatsby。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-06
- **Last Updated**: 2022-04-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 1. import css

Finally, import it in [`pages/_app.js`](https://www.nextjs.cn/docs/advanced-features/custom-app): [global-styles](https://www.nextjs.cn/learn/basics/assets-metadata-css/global-styles)

```js
// 全局引入方式
import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}
```
> **重新运行项目：**

```shell
npm run dev
```



### 2. 引用chakra UI

```shell
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
```



1. 在_app.js文件中引入：

```jsx
import '../styles/global.css'
import { ChakraProvider } from "@chakra-ui/react"

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}
```