Next.js13和Turbopack的使用

Next.js13和Turbopack的使用

next.js介绍

Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。

Turbopack介绍

Vercel 发布 Turbopack，目前处于 alpha 阶段。Turbopack 由 Webpack 作者 Tobias Koppers 亲自操刀，用 Rust 编写，作者的愿景是替代 Webpack 95% 的功能和扩展性。

官方声称热更新比 Vite 快 10 倍，比 Webpack 快 700 倍；

以上内容来源于Turbopack介绍 - 简书。详情请点击跳转链接

Turbopack官方文档

安装和使用

安装脚手架(嫌慢可以先切换源或使用cnpm)

npm i -g create-next-app

创建项目

使用javascript语言

create-next-app myapp 

使用typescript

create-next-app myapp --typescript

启动项目

常规启动项目

npm run dev

使用Turbopack

npx next dev --turbo

两者对比

webpack第一次启动信息，使用时间1.974秒

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1974 ms (154 modules)

Turbopack第一次启动信息，使用时间0.006秒！！！666

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - initial compilation 6.886ms

使用sass

安装sass

npm install sass -S

在根目录下的next.config.js文件导出中添加相关代码，官方给出的示例

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

配置之后的next.config.js应该是长这样的

/** @type {import('next').NextConfig} */
const path = require("path");
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
};
module.exports = nextConfig;

注意，目前Turbopack是不支持scss、less等语言的，估计在不久的将来将会对其进行支持

以下内容摘自turbo的github的 issues

.scss and .less files let you utilize SCSS and LESS - languages which enhance CSS in various ways. These languages don’t currently work out-of-the-box with Turbopack.
These are likely to be available via plugins in the future.
CSS – Turbopack

为路径设置别名，像VUE那样用@当作路径

next.config.js导出对象中加入

  webpack: (config) => {
    config.resolve.alias["@"] = path.resolve(__dirname);
    config.resolve.alias["@@"] = path.resolve(__dirname, "./components");
    return config;
  },

在根目录创建jsconfig.json或tsconfig.json

写入以下信息

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