CSS、SEO配置：NextJS项目实践干货

2023-09-24 04:28:45

Next.js 作为业界热门的 React 框架，因其出色的性能、强大的功能和易用性而深受广大开发者的青睐。在上一篇博文中，我们探讨了 Next.js 的路由系统。今天，我们将深入探讨 CSS 组件样式问题、数据请求和 SEO 信息配置，进一步提升您的 Next.js 开发技能。

一、CSS 组件样式问题

1. 全局样式导入

在 Next.js 项目中，我们可以通过在 pages/_app.js 文件中导入全局样式表，来实现对所有页面的样式控制。例如：

import '../styles/globals.css'

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

export default MyApp

2. 组件样式隔离

Next.js 采用了一种称为 CSS Modules 的技术，可以帮助我们实现组件样式的隔离。这种技术的基本思想是，每个组件都有自己的独立样式表，而这些样式表只能应用于该组件及其子组件。

例如，我们可以为 components/Button.js 组件创建一个样式文件 components/Button.module.css：

.button {
  color: blue;
  background-color: white;
  padding: 10px 20px;
  border: 1px solid blue;
  border-radius: 5px;
  cursor: pointer;
}

.button--large {
  font-size: 1.2rem;
}

然后，我们在 components/Button.js 组件中导入这个样式文件：

import styles from './Button.module.css'

const Button = ({ children, onClick, large }) => {
  return (
    <button className={large ? styles.button--large : styles.button} onClick={onClick}>
      {children}
    </button>
  )
}

export default Button

这样，我们就为 Button 组件创建了一个独立的样式表，而这个样式表只能应用于 Button 组件及其子组件。

二、数据请求

Next.js 提供了两种数据请求方式：客户端数据请求和服务端数据请求。

1. 客户端数据请求

客户端数据请求是指在浏览器中发送数据请求，然后由浏览器来处理请求并返回数据。这种数据请求方式通常用于获取一些不那么重要的数据，例如博客文章列表、产品列表等。

Next.js 提供了 fetch API 来进行客户端数据请求。例如：

const res = await fetch('/api/articles')
const articles = await res.json()

console.log(articles)

2. 服务端数据请求

服务端数据请求是指在服务器端发送数据请求，然后由服务器来处理请求并返回数据。这种数据请求方式通常用于获取一些重要的数据，例如用户信息、订单信息等。

Next.js 提供了 getServerSideProps 函数来进行服务端数据请求。例如：

export async function getServerSideProps() {
  const res = await fetch('/api/articles')
  const articles = await res.json()

  return {
    props: {
      articles
    }
  }
}

const Articles = ({ articles }) => {
  return (
    <ul>
      {articles.map(article => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  )
}

export default Articles

三、SEO 信息配置

Next.js 提供了多种方式来配置 SEO 信息，例如页面标题、页面和页面。

1. 页面标题

页面标题是网页中最重要的元素之一，它不仅会显示在浏览器的标签页中，还会显示在搜索引擎结果页中。因此，页面标题应该简短、准确、有吸引力，并包含一些重要的关键字。

Next.js 提供了 Head 组件来配置页面标题。例如：

import Head from 'next/head'

const Home = () => {
  return (
    <div>
      <Head>
        
        <meta name="description" content="Next.js 博客，分享 Next.js 开发经验" />
        <meta name="keywords" content="Next.js, React, JavaScript, SEO" />
      </Head>

      <h1>欢迎来到 Next.js 博客</h1>
    </div>
  )
}

export default Home

2. 页面

页面描述是对网页内容的简短总结，它会显示在搜索引擎结果页中。页面描述应该简短、准确、有吸引力，并包含一些重要的关键字。

Next.js 提供了 Head 组件来配置页面描述。例如：

import Head from 'next/head'

const Home = () => {
  return (
    <div>
      <Head>
        
        <meta name="description" content="Next.js 博客，分享 Next.js 开发经验" />
        <meta name="keywords" content="Next.js, React, JavaScript, SEO" />
      </Head>

      <h1>欢迎来到 Next.js 博客</h1>
    </div>
  )
}

export default Home

3. 页面关键字

页面关键字是与网页内容相关的单词或短语，它们可以帮助搜索引擎更好地理解网页内容。页面关键字应该与网页内容相关，并且包含一些重要的关键字。

Next.js 提供了 Head 组件来配置页面关键字。例如：

import Head from 'next/head'

const Home = () => {
  return (
    <div>
      <Head>
        
        <meta name="description" content="Next.js 博客，分享 Next.js 开发经验" />
        <meta name="keywords" content="Next.js, React, JavaScript, SEO" />
      </Head>

      <h1>欢迎来到 Next.js 博客</h1>
    </div>
  )
}

export default Home