`下哉G清ZY：https://www.97yrbl.com/t-1391.html`

npm init next-app next-guide
npm run dev
复制代码

在Next.js中，页面是呗放置在pages文件夹中的React组件，组件需要被默认导出，组件文件中不需要引入React，页面地址与文件地址是对应的关系。

pages/list.js

export default function List () {
    return <div>List</div>
}

// 访问
// localhost:3000/list.html
复制代码

要实现页面跳转需要用到一个组件Link, 默认是使用的Javacript进行页面转天，既SPA形式的跳转。

如果浏览器中JavaScript被禁用则会使用链接跳转。Link组件中不应添加除href属性以外的属性，其余属性添加到a标签上。

Link组件会通过预取功能自动优化应用程序以获得最佳性能。也就是当浏览器空闲的时候Link组件会预先去加载到Link中页面的内容，当我们访问的时候已经是家在完的，页面会很快。

import Link from 'next/link';

<Link href="/list"><a title="title">list page</a></Link>
复制代码

应用程序跟目录中的public文件夹英语提供静态资源

通过以下形式进行访问, 不需要写出public路径。

pulic/images/1.jpg -> /images/1.jpg

可以通过Head组件来进行修改, 可以定制网页的源数据。

import Head from 'next/head';

<>
    <Head>
        <title>Index Page</title>
    </Head>
</>
复制代码

为元素添加样式有多中，在Next.js中内置了styled-jsx, 他是一个css-in-js库，允许在React组件中编写css，css仅作用域组件内部。

<div>
    <div className="demo">test</div>
    <style jsx>{`
        .demo {
            color: red;
        }
    `}
    </style>
</div>
复制代码

还有一种是css模块的方式，通过使用css模块功能，允许将组件的css样式编写在单独的css文件中，css模块约定样式文件的名称必须为组件文件名称.modules.css

index.module.css

.p {
    color: green;
}
复制代码

import styles from './index.module.css';
<div className={styles.p}>test</div>

Next.js+React+Node系统实战，搞定SSR服务器渲染fen享