三、Next.js 的布局

简介

• 为了测试建立一个 layout.js 到 /components/layout 目录下。
• 文件内容：

export default function Layout({ children }) {
  return 
{children}
;
}

• 之后在 first-post.js 中添加并导入Layout组建，修改这个文件：

import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';  // 这里引入刚刚创建的 Layout 布局，这个布局只是讲页面直接放到了一个 div 中。

export default function FirstPost() {
  return (
    
      
        
      
      
First Post
      

        ← Back to home
      
    
  );
}

创建布局模块的 layout.module.css 文件

• 创建到 /components/ 目录下，添加如下CSS

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

• 重新修改 components/layout.js 文件：

import styles from './layout.module.css'; // 引入刚刚创建的CSS文件
export default function Layout({ children }) {
  // 加载创建的container样式
  return 
{children}
;
}

• 刷新页面看看样式是否已经加进来了

  
  
  image.png

全局样式 Global Styles

• 为了测试 global CSS 创建 pages/_app.js 文件并填写如下内容：

export default function App({ Component, pageProps }) {
  return ;
}

• _app.js 是一个顶层React组件，可以用它保存全局状态，或者全局CSS。
• 添加全局样式，创建 styles/global.css 文件，并写入如下样式：(这会改变一些标签的展示形式)

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

• 将这个全局的CSS导入到 pages/_app.js 文件

// `pages/_app.js`
import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return ;
}

• 刷新页面应该可以看到变化了。

结束

• 接下来介绍通过 clsx library 完成样式 classes 的切换。