极客教程Next.js 如何添加样式表
我们可以在Next.js中添加一个样式表，方法是在 “pages “目录下创建一个CSS文件，并将其导入所需的组件中。我们也可以使用CSS-in-JS库，如styled-jsx，在Next.js中设置样式。值得注意的是，这些样式只对它们被导入的组件有作用，不会影响全局样式。
让我们首先了解一下什么是Next.js。Next.js是一个开源的Web开发框架。Next.js是基于React的框架，具有服务器端渲染能力。速度和SEO都很好。你可以使用Next.js简单地构建和测试复杂的基于反应的应用程序。
Next.js是用Typescripts编写的。它提供了一个链接组件，将其他组件链接在一起，并有一个预取属性，允许后台预取页面资源。它能够动态导入React组件和JavaScript模块。另外使你能够导出你的网络应用程序的整个静态站点。
Next.js允许你从一个JavaScript文件导入CSS文件。这是可能的，因为Next.js将导入 的概念扩展到了JavaScript之外。
To get started first create a new NextJS app and run it on our dev server like this −
npx create-next-app my-app
cd my-app
npm start
方法
- 在Next.js项目的根部创建一个名为 “style “的新文件夹。
-
在style文件夹中，创建一个名为 “global.css “的新文件。这个文件将包含你的全局样式，它将被应用于你网站的所有页面。
-
在你的 “pages “文件夹中，创建一个名为”_app.js “的新文件。这个文件将被用来包装你的应用程序中的所有页面，你将在这里导入你的全局样式。
-
在_app.js文件中，使用以下代码导入global.css文件 —
import "../styles/global.css";
- 在_app.js文件中，将
组件中，以包括样式表。/>在组件中，以包括样式表 —
<Head>
<link rel="stylesheet" href="/styles/global.css" />
</Head>
- 在_app.js文件中，将
组件中，以包括样式表。/>在组件中，以包括样式表 —
<Head>
<link rel="stylesheet" href="/styles/global.css" />
</Head>
- 保存对 _app.js 文件的修改，你的全局样式现在将被应用到你网站的所有页面。
注意-如果你想为一个特定的页面添加一个样式表，你可以在该特定页面的JS文件中导入它，然后将导入的样式表包裹在一个