我有一个使用 Next.js 的应用程序，我需要在其中显示 Bengali 日期而不是 English。但是，在
期间，它按预期工作。但是在dev: next dev之后它没有按预期工作。在生产优化版本中，我看到它以英文显示，例如build:next build这到২০ জানুয়ারি, রবিবার.20 January, Sunday
我的代码有什么问题？
import { DateIcon } from "../../../utils/svgImages/svgImage";
import BeguniButton from "../../../components/Buttons/BeguniButton";
import Slider from "react-slick";
import { useLazyQuery } from "@apollo/client";
import { STUDENT_SPECIFIC_LESSONS_QUERY } from "../../../api/liveClass";
import moment from "moment"; // <-- You see?
import "moment/locale/bn"; // <-- You see?
import { useEffect, useState } from "react";
import { Empty, Skeleton } from "antd";
import SectionError from "../../../components/Error/Section";
import { classTypeDic } from "../../../lib/utils/constants";
import LiveClassDetails from "./LiveClassDetails";
const sliderSettings = {
arrows: false,
dots: true,
autoplay: true,
speed: 200,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 0,
className: "general-slider",
};
const TodayClass = ({
router,
lessonId,
contentId,
subName,
subColor,
classType,
status,
title,
chapterName,
startTime,
endTime,
date,
}) => {
const [showDetails, setShowDetails] = useState(false);
const joinLiveClass = () =>
router.push(
`/student/live-class/${contentId}?lesson_id=${lessonId}&programType=AcademicProgramLiveClassObject`
);
const seeDetails = () => setShowDetails(!showDetails);
return (
<>
<div className="flex flex-col px-4 py-5 border border-OutlineLightBlue rounded-lg md:rounded-10">
<div className="flex gap-x-2.5 items-center">
<div
className="font-balo font-medium text-xs md:text-14px md:leading-6"
style={{ color: subColor }}
>
{subName}
</div>
<div className="w-1 md:w-1.5 h-1 md:h-1.5 bg-OutlineLightBlue rounded-full" />
<div className="font-balo font-medium text-xs md:text-14px md:leading-6 text-Body">
{classType} ক্লাস
</div>
</div>
<div className="mt-3 md:mt-2 font-balo font-semibold text-base md:text-lg text-Body">
{title}
</div>
<div className="mt-0 md:mt-2 font-balo font-medium text-14px leading-6 md:text-base text-Body">
{chapterName}
</div>
{status === `ongoing` ? (
<div className="mt-2.5 md:mt-1.5 mb-5 md:mb-4 flex gap-x-2 md:gap-x-2.5 items-center">
<div className="w-2 md:w-2.5 h-2 md:h-2.5 bg-Semantic rounded-full" />
<div className="font-balo font-medium text-xs text-Semantic md:text-14px leading-6">
তোমার ক্লাস শুরু হয়ে গেছে
</div>
</div>
) : (
<div className="mt-2.5 md:mt-1.5 mb-5 md:mb-4 flex gap-x-2 items-center text-xs font-balo font-medium md:text-14px leading-6 text-Body2">
<DateIcon />
<div className="font-grotesk font-normal">{date}</div>
<div>|</div>
<div>
{startTime} - {endTime}
</div>
</div>
)}
<BeguniButton
onClick={status === `ongoing` ? joinLiveClass : seeDetails}
icon={false}
>
{status === `ongoing` ? `এখনই জয়েন করো` : `বিস্তারিত দেখো`}
</BeguniButton>
</div>
<LiveClassDetails
id={contentId}
isOpen={showDetails}
toggle={seeDetails}
/>
</>
);
};
const TodayClasses = ({ router, enrolledProgramId }) => {
const [stdSpecificLessons, setStdSpecificLessons] = useState([]);
const startDate = moment().locale("en").format("YYYY-MM-DD"); // <-- You see?
const endDate = moment().locale("en").format("YYYY-MM-DD"); // <-- You see?
const [fetchStudentSpecificLessons, { loading, error }] = useLazyQuery(
STUDENT_SPECIFIC_LESSONS_QUERY,
{
fetchPolicy: "cache-and-network",
}
);
useEffect(() => {
if (enrolledProgramId) {
fetchStudentSpecificLessons({
variables: {
program_id: enrolledProgramId,
start_date: startDate,
end_date: endDate,
content_type: "LiveClass",
},
onCompleted: (response) => {
const {
studentSpecificLessons: { data },
} = response;
if (data?.length) {
const formattedArray = data
.filter((item) => {
return moment
.utc(item.live_class.end_time)
.local(true) // <-- You see?
.isAfter(moment.utc());
})
.map((item) => {
const subColor = `#${item.color_code.split(",")[0]}`;
let status;
const startTime = moment
.utc(item.live_class.start_time)
.local(true); // <-- You see?
const endTime = moment
.utc(item.live_class.end_time)
.local(true); // <-- You see?
const currentTime = moment.utc();
if (currentTime.isBetween(startTime, endTime)) {
status = "ongoing";
} else if (startTime.diff(currentTime, "minutes") > 10) {
status = "upcoming";
} else {
status = "ongoing";
}
return {
lessonId: item.id,
contentId: item.content_id,
subName: item.live_class.subject_name,
subColor: subColor,
classType: classTypeDic[item.live_class.type],
status: status,
title: item.title,
chapterName: item.live_class.chapter_name,
startTime: moment
.utc(item.live_class.start_time)
.local(true) // <-- You see?
.format("h.mm a"),
endTime: moment
.utc(item.live_class.end_time)
.local(true) // <-- You see?
.format("h.mm a"),
date: moment
.utc(item.live_class.start_time)
.local(true) // <-- You see?
.format("D MMM, dddd"),
};
});
setStdSpecificLessons(formattedArray);
}
},
onError: (err) => console.log(err),
});
}
}, [enrolledProgramId, startDate, endDate, fetchStudentSpecificLessons]);
if (loading) return <Skeleton active />;
if (error) return <SectionError />;
if (stdSpecificLessons.length === 0) return <Empty />;
return (
<>
<section className="block lg:hidden">
<Slider {...sliderSettings}>
{stdSpecificLessons?.map((item) => {
// eslint-disable-next-line react/jsx-key
return <TodayClass router={router} {...item} />;
})}
</Slider>
</section>
<section className="hidden lg:grid grid-cols-12 gap-4">
{stdSpecificLessons?.map((item) => {
return (
<div className="col-span-6 2xl:col-span-4" key={Math.random()}>
<TodayClass router={router} {...item} />
</div>
);
})}
</section>
</>
);
};
export default TodayClasses;
您可以在上面的代码中看到，对于 API 调用，我正在使用
enbnmoment.locale('bn')我的
packages.json{
"name": "landingpage-shikho",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 4001",
"build": "next build",
"start": "next start",
"lint": "next lint",
"fix": "yarn lint --fix",
"pre-commit": "yarn lint --fix && git add -A ."
},
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@apollo/client": "^3.3.12",
"@headlessui/react": "^1.7.3",
"@phuocng/react-pdf-viewer": "^1.7.0",
"antd": "^5.3.2",
"autoprefixer": "^10.2.4",
"axios": "^0.21.1",
"cloudinary-core": "^2.11.4",
"constate": "^3.3.2",
"date-fns": "^2.23.0",
"eslint": "^8.33.0",
"formik": "^2.2.6",
"graphql": "^15.5.0",
"graphql-tag": "^2.11.0",
"isomorphic-unfetch": "^3.1.0",
"jwt-decode": "^3.1.2",
"lodash.debounce": "^4.0.8",
"moment": "^2.29.4",
"next": "^12.1.0",
"nookies": "^2.5.2",
"pdfjs-dist": "2.5.207",
"popper.js": "^1.16.1",
"postcss": "^8.2.6",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-big-calendar": "^0.35.0",
"react-countdown": "^2.3.1",
"react-dom": "^17.0.2",
"react-hls-player": "^3.0.7",
"react-loader-spinner": "^4.0.0",
"react-lottie": "^1.2.3",
"react-multi-carousel": "^2.6.2",
"react-player": "^2.11.0",
"react-responsive": "^9.0.2",
"react-router-dom": "^6.4.2",
"react-scroll": "^1.8.1",
"react-select": "^4.3.0",
"react-slick": "^0.28.1",
"react-tooltip": "^4.4.0",
"react-use-downloader": "^1.2.1",
"recharts": "2.1.12",
"sass": "^1.57.1",
"slick-carousel": "^1.8.1",
"subscriptions-transport-ws": "^0.9.16",
"sweetalert2": "^10.15.6",
"tailwindcss": "^2.1.2",
"webpack": "^4.0.0",
"yarn": "^1.22.10"
},
"devDependencies": {
"@babel/core": "^7.13.8",
"@svgr/webpack": "^5.5.0",
"@types/node": "^18.7.14",
"classnames": "^2.3.1",
"eslint-config-next": "13.1.6",
"typescript": "^4.8.2",
"url-loader": "^4.1.1"
}
}
Locale 与 local 不同。 如果您想在语言环境之间切换，我建议同时导入并相应地设置
moment.locale('en')moment.locale('br')