Next.js 简明教程

2022-09-21 16:42:28 浏览数 (1)

最近用Next.js Editor.js 撸了一个博客系统。开发起来甚是畅滑，如果你喜欢React，又有同构的需求，不妨由此文入手。

如果你的应用需要兼容IE 9，10等浏览器，请出门左拐找找ejs等“传统”方式～～～

为什么需要前端同构？

  • 搜索引擎SEO以及首屏体验的，需要服务端渲染页面
  • 日益丰富的前端交互，需要更强大前端框架来满足。

前端同构，就是一站式解决上述问题的方案：让一套的JavaScript代码，同时跑在服务端和客户端。

为什么需要现代的前端同构框架？

现代点的前端框架都有服务端渲染API，为什么我们还需要一个同构框架？

原因是，一个正常的同构需求，我们需要：

  1. 前端组件渲染为HTML字符串，流
  2. 服务端，客户端资源的加载不同处理，(首屏不一定全部加载完所有js……)
  3. 服务端，客户端的状态数据的传递
  4. 打包工具链
  5. 性能优化
  6. ……

而React SSR的API只有四个函数： renderToString()， renderToStaticMarkup()，renderToNodeStream()，renderToStaticNodeStream()（Vue也类似），只能满足第一个需求，我们需要更多，而以Next.js为代表前端同构框架除了能满足上述基本的要求外，还能为我们带来：

  1. 极佳的开发体验，做到和开发SPA一样，(是的这个第一重要，不然不如选用传统模版渲染方案)
  2. 初次server渲染及其高效，所需JS也越小越好。
  3. 再之后的客户端渲染能够尽可能利用服务端带下来的数据。
  4. 便利的SSG(Static Site Generation)支持。
  5. 支持TypeScript
  6. ……

换句话说，让开发越发动态灵活，让渲染越发静态高效。

举个例子：

  1. Wordpress等cms系统，动态需求容易满足，但是静态缓存的优化就较难实现。
  2. Hexo等方案，页面渲染完全静态化(落地为文件)，但是但凡有点动态化的需求，基本无法实现。

其中Next.js可以说是前端同构中的开山，翘楚级框架，依赖React渲染组件。当然Vue有Nuxt.js，Angular有 Angular Universal，甚至Svelte也有Sapper 。

正式开始之前，强烈推荐Next.js的官方文档，挺清晰易懂。

Getting Started | Next.js

Get started with Next.js in the official documentation, and learn more about all our features!

Next.js的官方Blog，也十分推荐，各个版本的更新详尽及时，堪称模范。

Blog | Next.js

Next.js is the React framework for production

Next.js简明教程

本文基于Next.js 9.3，这里不涉及原理，只是做个入门指导。

基于文件路径的路由

页面

一般前端web应用都可以简化为，基于路由的页面和API两部分。Next的路由系统基于文件路径自动映射，不需要做中性化的配置。

一般都约定在根目录pages文件夹内：

  • ./pages/index.tsx --> 首页 /
  • ./pages/admin/index.tsx --> /admin
  • ./pages/admin/post.tsx --> /admin/post 
代码语言：javascript复制
import styles from './style.module.css'
function About() {
  return <div>About</div>
}

export default About

默认导出一个React的组件，Next就会帮你默认生成对应路由的页面。

  • 你不用关心head里面资源如何配置加载
  • 可以像SPA应用一样，使用css-in-js，css module，less，sass等样式import方式。
页面间的导航
代码语言：javascript复制
import Link from 'next/link'
function Home() {
  return (
    <ul>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

注意，Link中最好独立包裹a元素。

增加Head
代码语言：javascript复制
import Head from 'next/head'
function About() {
  return (
    <div>
      <Head>
        <title> Hipo Log - {props.post?.name ?? ''}</title>
      </Head>
      content
    </div>
  );
}
export default About
Dynamic import 代码拆分

Next也支持ES2020的dynamic import()语法，可以拆分代码，或者有些第三方组件依赖浏览器API时候精致服务端渲染(ssr: false)

代码语言：javascript复制
import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello'),
  { 
    loading: () => <p>...</p>,
  	ssr: false
  }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithCustomLoading />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

javascript http api react typescript

0 人点赞