同构 - Next.js初识 - 《前端框架》

路由
跳转
资源
元数据
预渲染

匆匆一瞥，时间紧迫，先简单记录几个要点。

路由

next.js的路由是关联在page路径下面的：

文件路径pages/index.js 对应路由 /。
文件路径pages/posts/first-post.js 对应路由/posts/first-post。
```
export default function FirstPost() {
return <h1>First Post</h1>
}
```
注意一定要default导出。

动态路由：
next.js中配置路由可不能和react- router一样写成: pathFather/pathSon/:id这种动态参数。
需要按照路由路径对应，新建对应的文件，比如在pathFather/pathSon目录下建立文件[id].js。注意这里是有”[]”的。
页面中接收路由参数可以通过getStaticPath、和getStaticProps配合使用。

跳转

Link组件控制跳转：

import Link from 'next/link'
export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a className="foo" >Back to home</a>
        </Link>
      </h2>
    </>
  )
}

Link的跳转是client-side navigation级别的。当你需要链接到外部资源还是要用a标签。还有，不要在link上加样式相关的属性或者类名，比如上面例子中link包裹了a，那么把类名加到a上（className=”foo”）。
另外需要注意的是，next.js本身是自带代码分割的。会自动的分割开每一个page的代码。
（代码分割的好处在于，不用一次性加载太多的代码，而且当有错误抛出不会导致全页面崩溃）
值得一提的，当页面中ViewPoint区域中存在Link标签，next.js会自动预加载其页面，这样保证了跳转的流畅性。

资源

根目录下的public目录用于放置静态资源。

<img src="/vercel.svg" alt="Vercel Logo" className="logo" />

比如引用的静态资源路径是/vercel.svg，实际项目中的存放是/public/vercel.svg。

元数据

修改metadata的方式有两种：

引入Head组件 ```javascript import Head from ‘next/head’;

export default function PageX() { return ( <> … </> ) }

因为page目录下的组件都可以引入Head组件。
- pages/_document.js
这是next.js提供了[自定义html的方式](https://www.nextjs.cn/docs/advanced-features/custom-document)
<a name="IH7qb"></a>
#### 样式
next.js内建支持Sass和Css，同时内建支持了 [styled-jsx，](https://github.com/vercel/styled-jsx)这是一种css-in-js方案。当然了也支持CSS Modules的方式。
- css modules：
通常css modules是不错的组建级样式方案。
- 全局样式：
不过，全局样式的方式是：在page目录下创建_app.js<br />简单了解下_app.js。可以这样理解，_app.js导出的是一个全局的组建，可以横跨各个页面，所以，不只是在组建里面引用了全局样式，也可以维护一些公共的状态等逻辑：
```javascript
import '../styles/global.css' // 这里是任何一个需要全局应用的css文件
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

配置postCss

开箱即用的，next.js编译css使用了postCss。配置postcss.config.js，这个文件写在根目录下。

预渲染

next.js提供了两种预渲染的方式

static generation
server-side rendering

另外，这两种方式也可以在项目中混合使用。
static generation适用于偏静态的。它是在构建的时候完成数据获取和注入，所以，这种方式的构建产物完全可以放在CDN上。
server side rendering这种方式是的预渲染时机在每次请求的时候。

static generation获取数据用这个api：getStaticProps ```javascript export default function Home(props) { … }

export async function getStaticProps() { // Get external data from the file system, API, DB, etc. const data = …

// The value of the props key will be // passed to the Home component return { props: … } }


- server-side-rendering使用：getServerSIdeProps
```javascript
export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

注意，因为使用的是server-side-rendering，getServerSIdeProps方法的调用时机是收到请求时，所以参数context是中包含了request信息。
当然也可以选择csr（Client Side Rendering）