最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • [重学 Next.js] — 你应该知道的 Next.js 高级技巧 10 点 (下)

    正文概述 掘金(前端周同学)   2021-08-26   706

    这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战

    前言

    上一篇文章 [重学 Next.js] — 你应该知道的 Next.js 高级技巧 10 点 (上) 进行了 Next.js 高级用法的前五点,今天我们来说说剩下的五点,可谓是一个比一个有用,以后在 Next.js 开发过程中都会有极大的帮助。

    原文链接

    VI - Absolute Imports and Module Path Aliases - 模块路径导入

    这一点毋庸置疑,大部分人平时在自己搭建项目的时候,也会通过各种复杂的配置比如 Webpack alias/Babel 等进行配置,配置的好处就是:

    • 原来的代码
    import Button from "../../../components/button";
    import request from "../../../utils/request";
    
    • 新的代码
    import Button from "@/components/button";
    import request from "@/utils/request";
    

    这样做并不是强制性的,看开发者的个人习惯,但是这样做有两点好处:

    • 使用简单,再也不用去费劲吧啦的去数相对路径有几层了

    • 如果某天你的相对路径层级发生了变化,也不需要去手动修复,因为它看起来就和绝对路径一样

    示例代码

    那么在 Next.js 里,这个功能是如何简单的进行配置实现呢?

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["src/*"]
        }
      }
    }
    

    上面两个配置就是核心的配置,真的是非常简单,配置过后的效果,如下图所示:

    [重学 Next.js]  — 你应该知道的 Next.js 高级技巧 10 点 (下)

    VII - CRUD API Routes —— 动态 API 路由

    动态路由 API 的出现,算是 Next.js 浓墨重彩的一笔,官方给的是名称是 Dynamic API Route,但是其实如果你是一个 Next.js 的入门使用者,你其实可能也不知道这东西到底能干啥,这里使用的词是 CURD API Routes,就从 CURD 这个角度,来给大家简单看看这个功能的强大之处。

    示例代码1 - 最简单的 GET 数据

    这里没有链接数据库,简单的构造了一下数据:

    const users = [];
    
    for (let i = 0; i < 126; i++) users.push(i);
    
    const data = Array.from(users, (item) => ({
      id: item,
      age: Math.random() * 60,
      name: `luffy-${++item}`,
      email: `luffy-${++item}@126.com`,
    }));
    
    export default data;
    

    然后使用 Next.js API 路由来编写一个接口:

    // src/pages/api/user/list
    
    import type { NextApiRequest, NextApiResponse } from 'next'
    import users from '@/data/user';
    
    type IUserData = {
      id: number,
      age: number,
      name: string,
      email: string,
    }
    
    
    function sleep(time: number) {
      return new Promise(resolve => setTimeout(resolve, time))
    }
    
    export default async function handler(
      req: NextApiRequest,
      res: NextApiResponse<IUserData[]>
    ) {
      await sleep(3000);
      res.status(200).json(users);
    }
    
    

    非常简单就是把我们的构造数据返回,我们可以来调用一下:

    [重学 Next.js]  — 你应该知道的 Next.js 高级技巧 10 点 (下)

    可以看到,接口正常返回数据了,然后我们在页面里获取一下然后渲染。

    import { Table } from 'antd';
    import swr from 'swr';
    
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
      },
    ];
    
    const fetcher = (url: string) => fetch(url).then(res => res.json()).then(data => data);
    
    export default function UserList() {
      const { data, error } = swr('/api/user/list', fetcher)
      return (
        <Table
          rowKey="id"
          loading={!data}
          dataSource={data}
          columns={columns}
        />
      )
    }
    

    一个非常简单的页面,展示用户列表,看一下实际效果:

    [重学 Next.js]  — 你应该知道的 Next.js 高级技巧 10 点 (下)

    上面就是一个简单的数据流程,mock api -> 获取数据 -> 渲染页面,最主要的是这一切都闭环在 Next.js 项目里,你不需要去其他网站或者平台,真的很方便。

    示例代码2 - CURD

    上面是一个简单的 GET api 请求,既然是 CURD,那么肯定是不仅仅一个 GET 这么简单,这里再通过一小段代码,来给大家看看强大的 Next.js CURD API Routes。

    
    // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
    import type { NextApiRequest, NextApiResponse } from 'next'
    import users from '@/data/user';
    
    type IUserData = {
      id: number,
      age: number,
      name: string,
      email: string,
    }
    
    function sleep(time: number) {
      return new Promise(resolve => setTimeout(resolve, time))
    }
    
    export default async function handler(
      req: NextApiRequest,
      res: NextApiResponse<IUserData[] | any>
    ) {
      if (req.method === 'PUT') {
        console.log('req.body: ', req.body);
        res.status(200).json({ message: `PUT 请求接受成功,请求的 body 数据是 ${JSON.stringify(req.body)}` });
      }
    
      if (req.method === 'GET') {
        await sleep(1000);
        console.log('req.query: ', req.query);
        res.status(200).json(users.find(item => item.id === +req.query.id));
      }
    
      if (req.method === 'POST') {
        console.log('req.body: ', req.body);
        res.status(200).json({ message: `POST 请求接受成功,请求的 body 数据是 ${req.body}` });
      }
    
      if (req.method === 'DELETE') {
        console.log('req.body: ', req.body);
        res.status(200).json({ message: `DELETE 请求接受成功,想要删除的数据是 ${req.body}` });
      }
    }
    
    

    上面就是一个简单的增删改查 CURD API ROUTES,是不是非常的简单?也来看一下效果如何:

    [重学 Next.js]  — 你应该知道的 Next.js 高级技巧 10 点 (下)

    从上面两个例子相信大家很容易就能发现这个功能的强大之处,Next.js CURD API 我这边简单总结的话有如下几点好处:

    • 开发中可以模拟真实的数据交互流程而不用自己虚假的构造数据

    • Mock 数据打通 API 接口很方便,场景也更真实

    • 有了这个 API,Next.js 基本上是无缝切换全栈

    • 更多需要大家使用过程中自己去体会...

    VIII - Setting Response HTTP Caching Headers —— 设置 HTTP 请求缓存头

    这个理解起来就很简单了,Next.js 其实一直在做的就是静态增量,对于静态页面以及资源来说,Vercel Edge Network 将自动 缓存 静态资产,以便尽快提供数据。不过当需要使用 API 路由或服务器端渲染页面时,开发者需要手动设置一个Cache-Control头部来缓存这些资源。

    示例代码

    下面代码,将对应的 json 响应换存在 Vercel 服务器一天。

    export default async function handler(
      req: NextApiRequest,
      res: NextApiResponse<IUserData[]>
    ) {
      res.setHeader(
        'Cache-Control',
        's-maxage=86400'
      );
      res.status(200).json(users);
    }
    

    IX - Shared Component Attributes —— 共享组件属性

    关于这个概念,其实很多框架都在做,也确实是方便了开发者,举个最简单的例子来说明共享组件属性

    示例代码

    • 没有/不使用共享组件之前
    // pages/list.tsx
    
    import Head from 'next/head';
    
    export default function List() {
      return (
        <>
          <Head>
            <title>列表页</title>
            <meta name="description" content="我是列表页的描述" />
          </Head>
          我是列表页面,路径是 /list
        </>
      );
    }
    
    
    • 使用共享组件后
    // pages/list.tsx
    
    export default function List() {
      return (
        <>
          我是列表页面,路径是 /list
        </>
      );
    }
    
    List.title = '列表页';
    List.description = '我是列表页的描述';
    
    // pages/_app.tsx
    
    import type { AppProps} from 'next/app'
    
    function MyApp({ Component, pageProps }: AppProps) {
      return (
        <>
          <Head>
            <title>{Component.title || 'Next App'}</title>
            <meta name="description" content={Component.description || ''} />
          </Head>
          <Component {...pageProps} />
        </>
      )
    }
    export default MyApp
    
    

    仔细一看,感觉没方便啥样,但是我举的例子只是一个组件,当你的系统有几十个几百个页面的时候,这种方式的便利性就体现出来了,大家可以仔细对比思考一下。最后效果就是如下图所示:

    [重学 Next.js]  — 你应该知道的 Next.js 高级技巧 10 点 (下)

    X - Next.js Mobile Applications? —— 基于 Next.js 的移动端应用

    是的你没看错,就是带着一个问号,但是我觉得已经是一个肯定的结论了,在跨端框架盛行的今天,RN、Flutter 等框架为前端赋能,同时 Next.js 也在跨端这条路上开始行自己的路了,比如接下来要介绍的 —— CapacitorJS,感谢 Ionic 团队,他们创建了 CapacitorJS 让我们可以使用 Next.js 构建类似移动端应用的体验,这是一个可以在手机上为您提供原生体验的库。

    因为我也没有过多的研究过,所以在这里就简单的照葫芦画瓢给大家跑一个 Demo 看看。

    示例代码

    官方仓库

    # 打包编译
    yarn install
    yarn build
    yarn export
    
    # 运行 IOS APP
    npx cap sync
    npx cap run ios
    
    

    我这边是运行的是 IOS APP,选择的模拟器是 iPhone11,启动项目后效果如下:

    [重学 Next.js]  — 你应该知道的 Next.js 高级技巧 10 点 (下)

    官方的架构原理图:

    [重学 Next.js]  — 你应该知道的 Next.js 高级技巧 10 点 (下)

    总的来说,开发模式基本上就是 Next.js 的开发模式,使用体验上也还 OK,个人觉得可以尝试玩玩。

    总结

    算是个人重新开始用 Next.js 的第一次输出文章,后面决定深入 Next.js,希望能跟大家分享更多关于 Next.js 的文章,感兴趣可以加交流群,随时沟通,有问必答~

    [重学 Next.js]  — 你应该知道的 Next.js 高级技巧 10 点 (下)


    起源地下载网 » [重学 Next.js] — 你应该知道的 Next.js 高级技巧 10 点 (下)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元