文章目录加载中

NextJS基础:学习笔记

# 支持 CSS

方法 1:全局引入

pages/_app.js 中全局引入 css。

方法 2: css module

命名规范: [name].module.css

优点:

  • 类名只在当前组件中有效
  • 加载最少 css 资源
import styles from './Button.module.css'
export function Button() {
  return (
    // ...
  )
}

方法 3: 预处理器

支持 sass、less、stulus

方法 4: css in js(不推荐)

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

# 静态文件

放置在 /public/ 目录下,访问路径是 “根路由 + 文件相较于 public 目录的路径”。

# 全局环境变量

两种管理和注入方法:

  • cross-env 库注入
    npx cross-env NEXT_PUBLIC_EXAMPLE_KEY=my-value next de
    
  • .env 文件进行管理(推荐)
    API_KEY='my-secret-api-key'
    NEXT_PUBLIC_APP_LOCALE='en-us'
    

关于 .env 文件,nextjs 还支持以下玩法:

本文来自心谭博客:xin-tan.com,经常更新web和算法的文章笔记,前往github查看目录归纳:github.com/dongyuanxin/blog