自定义

next提供的head是怎么用的：

/page/index.js

全局配置 - 图1

使用一次head

  1. import React, {useCallback} from 'react';
  2. import Link from  'next/link'
  3. import Head from 'next/head';
  5. export default function x() {
  6.   const clickMe = useCallback(()=>{
  7.     console.log('you click me');
  8.   },[])
  9.   return (
  10.     <>
  11.       <div>First Post
  12.         <Head>
  13.           <title>我的第一篇文章</title>
  14.         </Head>
  15.         <button onClick={clickMe}>click me</button>
  16.         <Link href="/">
  17.           <a>点击这里</a>
  18.         </Link>
  19.       </div>
  20.     </>
  21.   );
  22. }

效果：

全局配置 - 图2

全局自定义head

/pages/_app.js

  1. import '../styles/globals.css';
  2. import Head from 'next/head';
  4. function MyApp({Component, pageProps}) {
  5.   return <div className="hasson">
  6.     <Head>
  7.       <title>我的博客 - Hasson</title>
  8.       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
  9.     </Head>
  10.     <Component {...pageProps} />
  11.   </div>
  12.     ;
  14. }
  16. export default MyApp;

全局配置 - 图3

_app.js是所有页面的根组件，可以看到在id为’_next’的div之后的第一个div的className是’hasson’，这个是我们在myApp里面设置的。

由此可以得出，_app.js的这个组件，是可以影响所有组件的。所以在这里加上一个统一的head和meta viewport，是可以全局作用于所有页面的。

所以，如果有需要全局配置的文件，是可以在_app.js这个文件里面写的。

全局配置

  • pages/_app.js
    • export default function App 是每个页面的根组件
    • 页面切换时App不会销毁，App里面的所有组件销毁
    • 可用App保存全局状态
  • 注意
    • 创建_app.js之后需要重启 yarn dev

全局CSS

  • 放在_app.js里
    • import ‘../styles/global.css’
    • 因为切页面时App不会销毁
    • 其他地方不能import globa.css
    • 其他地方只能写局部CSS

局部css

  1. export default function Home() {
  2.   return (
  3.     <div>
  4.       <h1>标题</h1>
  5.       <p>段落</p>
  6.       <style jsx>{`
  7.         h1 {
  8.           color: red;
  9.         }
  10.       `}</style>
  11.     </div>
  12.   );
  13. }

全局配置 - 图4