Starting with next.js

创建一个Next.js应用

1
2
3
4
5
6
7
8
yarn create next-app
# or
npx create-next-app
# or 
yarn create next-app --example with-chakra-ui mynextapp
yarn create next-app --example with-chakra-ui-typescript cui_ts

# 在cli提示中输入project name, 如nextdemo
1
2
3
# 开发启动
yarn dev
# 访问 http://localhost:3000/

清理代码

  • 删除styles目录
  • 清除
    • index.js 内容
    • _app.js中引用css

安装chakra相关

1
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

  • 修改_app.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import { ChakraProvider } from "@chakra-ui/react"

    function MyApp({ Component, pageProps }) {
      return (
        <ChakraProvider>
          <Component {...pageProps} />
        </ChakraProvider>
      )
    }

    export default MyApp

  • 添加chakra theme (optional)

1
2
# 添加字体
yarn add next-google-fonts

创建 styles/theme.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { extendTheme } from "@chakra-ui/react"
import { theme as chakraTheme } from '@chakra-ui/react'
import { createBreakpoints } from '@chakra-ui/theme-tools'

const fonts = {
    ...chakraTheme.fonts,
    body: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segei UI Emoji"`,
    heading: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segei UI Emoji"`
}
const overrides = {
    ...chakraTheme,
    fonts
}

const customTheme = extendTheme(overrides)

export default customTheme

创建pages/_document.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// google fonts 之类按需
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import GoogleFonts from 'next-google-fonts'
import { ColorModeScript } from '@chakra-ui/react'

export default class Document extends NextDocument {
  render() {
    return (
      <Html>
          {/* <GoogleFonts href="https://.... /> */}
        <Head />
        <body>
          <ColorModeScript />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
  • 修改_app.js, 添加customTheme
    1
    2
    3
    4
    5
    ...
    import customTheme from "../styles/theme"
    ...
        <ChakraProvider resetCSS theme={customTheme} >
    ...