Nextjs 使用 Emotion

Nextjs 使用 Emotion

Nextjs 是目前比较流行的 React server side render 的一个方案，我个人比较喜欢，因为我之前写 React SPA 的时候发现还是有很多的问题的，比如 React 仅仅是一个视图层， 要做一个完整的项目需要额外加 React-router, redux，或者 mobx 才能够工作，React-router api 太奇怪，不如 Vue-router 这种配置来得简单， Redux 样板代码太多， 要写一大推的 action， reducer， 而且这些库都不是官方维护的， 所以他们并不能保证与 React 无缝兼容和平滑升级，这一点 Vue 比 React 做得好太多. Nexjs 解决了上面的很多问题，比如 Nextjs 提供了基于文件的路由，对于代码分割非常得友好，页面之前或者全局状态可以保存在后端，减少或者不用 Redux， 没有跨域问题。

但是 React 本身基于 JSX， 表现力比基于模版的 Vue 强很多， 而且 Nextjs SSR 本身也解决了单页面应用天生的一些缺陷， 比如 SEO 问题，SEO 对于博客，资讯，新闻类页面是极其重要的功能。与 Nextjs 对应的还有 Nuxtjs， Nuxtjs 是基于 Vue 的一个 SSR 方案， 也是一个不错的选择。

Emotion 是一个 css in js 的一个样式方案，支持 React， 但是不仅仅限于 react，虽然 Nexjs 本身内置了 component level 的 css 方案，但是功能并没有 Emotion 强大和好用，与 Emotion 类似的可能用户更加熟悉的是 Styled-components，两者的功能差不多，也都是支持 SSR 的， Emotion 可能更加时髦和开箱即用一点吧（个人见解）。

下面来创建一个 Nexjs with emotion 项目。

首先常见一个 Nexjs 项目，使用 create-next-app 可快速创建

npx create-next-app nextapp

接下来添加 emotion 依赖：

npm i --save @emotion/reactnpm i --save @emotion/stylednpm i --save-dev @emotion/babel-plugin

然后在项目目录下添加一个 babel 的配置文件 .babelrc :

{ "presets": [ [ "next/babel", { "preset-react": { "runtime": "automatic", "importSource": "@emotion/react" } } ] ], "plugins": ["@emotion/babel-plugin"]}

Nexjs 配置 Emotion 已经完成了， 就是这么简单， 我们来做一下测试， 修改 pages 下的 index.js：

import {css} from "@emotion/react";const style = css` margin: 0; padding: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; .btn { border: none; background: #0070f3; color: #fff; padding: 10px 30px; border-radius: 4px; cursor: pointer; font-size: 1.1rem; }`;export default function Home() { return (

最后运行 npm run dev， 在运行 dev 之前需要先 build 一次， npm run build， 即可看到一个居中的蓝色按钮了， 更多的 Emotion 功能可以参考官方文档， 比如主题切换，缓存，动画等等，官方有更为详细的说明。