Cách thiết lập Storybook cho một dự án Next.js

Storybook là một công cụ mạnh mẽ để xây dựng các thành phần giao diện người dùng một cách riêng biệt. Nó giúp bạn tạo và kiểm tra các thành phần mà không cần chạy toàn bộ ứng dụng.

Nếu bạn đã từng sử dụng Storybook với Next.js, bạn sẽ nhận thấy rằng bạn cần phải định cấu hình nó để xử lý CSS và hình ảnh đúng cách. Quá trình này có thể gây khó chịu nhưng những bước đơn giản này sẽ giúp bạn dẫn đường.

Bắt đầu bằng cách thiết lập dự án Next.js

Nếu bạn chưa thiết lập dự án Next.js, hãy làm theo hướng dẫn Bắt đầu Next.js chính thức để tạo một dự án mới.

Khởi tạo Storybook

Chạy lệnh sau trong terminal để khởi tạo Storybook.

npx sb init 

Lệnh này phát hiện dự án bạn đang làm việc, cài đặt tất cả các gói cần thiết và tạo các câu chuyện mẫu.

Thiết lập CSS

Điều đầu tiên bạn cần làm là đưa tệp CSS chung vào preview.js.

Thiết lập kiểu toàn cầu

Các kiểu toàn cầu áp dụng trên toàn bộ ứng dụng. Để áp dụng các kiểu này trong các câu chuyện, bạn có thể nhập tệp vào các câu chuyện riêng lẻ và điều đó sẽ hoạt động. Tuy nhiên, bạn sẽ phải viết lại câu lệnh nhập cho nhiều câu chuyện hoặc thậm chí quên.

Một giải pháp tốt hơn là nhập các kiểu toàn cầu trong.truyện / preview.js tệp, một tệp chứa tất cả các cấu hình được chia sẻ cho Storybook.

Ở đầu .storybook / preview.js, bao gồm câu lệnh nhập sau.

import "../styles/globals.css";

Thiết lập Sass cho Storybook trong Next.js

Theo mặc định, Storybook không hỗ trợ ngoại ngữ cho ngôn ngữ tiện ích mở rộng Sass. Bạn cần mở rộng cấu hình webpack bằng cách cài đặt style-loader, css-loader và sass-loader.

npm i -D style-loader css-loader sass-loader

Đây là những gì các gói này làm:

• style-loader đưa CSS vào DOM.
• css-loader thông dịch @import và URL () như nhập / yêu cầu và giải quyết chúng.
• sass-loader tải SCSS vào CSS.

Để định cấu hình các gói này, hãy thêm mã sau vào .storybook / main.js:

const path = require('path');
module.exports = {
webpackFinal: async (config) => {
config.module.rules.push(
{
test: /\.s(a|c)ss$/,
include: path.resolve(__dirname, '../'),
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
auto: true,
localIdentName: '[name]__[local]--[hash:base64:5]',
},
},
},
'sass-loader'
],
},
);
return config;
}
}

Sau đó, Sass sẽ có sẵn trong Storybook.

Áp dụng Đề xuất chưa được tối ưu hóa cho Hình ảnh Next.js

Next.js có nhiều tính năng tối ưu hóa. Một trong số đó là tối ưu hóa hình ảnh thông qua thành phần hình ảnh giúp hình ảnh tải nhanh hơn và thích ứng với màn hình. Tuy nhiên, đó là một điều khó khăn khi làm việc với Storybook vì Storybook chạy tách biệt với môi trường Next.js. Tốt hơn hết là bạn nên khử tối ưu hóa hình ảnh trong các câu chuyện.

Để bắt đầu, bạn cần cung cấp thư mục công cộng trong Storybook để cho biết vị trí của các hình ảnh. Bạn có thể làm điều đó trong bản đồ tập lệnh npm trong package.json tập tin hoặc trong .storybook / main.js.

Trong package.jsoncập nhật kịch bản Storybook để phục vụ thư mục công cộng.

"scripts": {
"storybook": "start-storybook -p 6006 -s ./public",
"build-storybook": "build-storybook -s public"
}

Ngoài ra, hãy sửa đổi ./storybook/main.js để bao gồm thư mục tĩnh, trong trường hợp này, là thư mục chung.

module.exports = {
"staticDirs": [ "../public" ],
}

Sau khi cung cấp thư mục công khai, hãy áp dụng phần mềm hỗ trợ chưa được tối ưu hóa cho các hình ảnh Next.js được sử dụng trong các câu chuyện.

Trong .storybook / main.js, hãy thêm mã sau:

import * as NextImage from "next/image";
const OriginalNextImage = NextImage.default;
Object.defineProperty(NextImage, "default", {
configurable: true,
value: (props) => (
<OriginalNextImage
{...props}
unoptimized
/>
),
});

Mã này sử dụng phần mềm hỗ trợ chưa được tối ưu hóa ở bất kỳ nơi nào mà thành phần hình ảnh được sử dụng.

Sử dụng Storybook trong Next.js

Storybook là một trong những công cụ mà bạn nghĩ là quá tẻ nhạt để sử dụng nhưng một khi bạn bắt đầu sử dụng chúng, bạn sẽ nhận ra mình đã bỏ lỡ điều gì. Với Storybook, bạn có thể tạo và kiểm tra các thành phần khác nhau mà không cần chạy toàn bộ ứng dụng của mình. Do đó, nó làm cho các thành phần xây dựng từ đầu trở nên đơn giản.

Nếu bạn đang sử dụng Next.js, hãy đảm bảo rằng bạn định cấu hình CSS và khử tối ưu hóa hình ảnh trước khi bắt đầu.