提问人：Giftson Gabogen 提问时间：1/17/2023 最后编辑：Giftson Gabogen 更新时间：1/17/2023 访问量：37
在 NextJS 上添加客户端渲染组件
add client rendered component on nextjs
问：
我正在做什么：使用 nextjs 13 创建 SSG，但仍使用页面文件夹结构，我正在构建和导出带有下一次导出的站点，并计划将其托管为静态。
我想做什么：我想腾出一个时间并将其添加到我的标题中，因为客户端呈现，例如用户在 2023 年 11 月 1 日晚上 9 点对页面的请求，我想显示 2023 年 11 月 1 日晚上 9 点，然后在重新加载时我希望它在请求的时间更新
我做了什么：尝试了很多方法，在时间组件的顶部添加了“use client”，使用了useEffect，将组件命名为DateNow.client.tsx。仍然不起作用，显示的日期是生成或下次导出发生的日期。
任何想法
这是组件
"use client";
import { useState, useEffect } from "react";
type Props = {};
export default function DateNow({}: Props) {
useEffect(() => {
const date = new Date();
const day = String(date.getDay());
const month = String(date.getMonth());
const year = String(date.getFullYear());
const second = String(date.getUTCSeconds());
setFullDate({ day, month, year, second });
}, []);
const [fullDate, setFullDate] = useState({
day: String(new Date().getDay()),
month: String(new Date().getMonth()),
year: String(new Date().getFullYear()),
second: String(new Date().getUTCSeconds()),
});
return (
<div>
{fullDate.day} - {fullDate.month} - {fullDate.year} - {fullDate.second}
</div>
);
}这就是我收录它的方式
import React from "react";
import DateNow from "./DateNow.client";
type Props = {};
export default function Header({}: Props) {
return (
<header>
Header <DateNow />
</header>
);
}这是导出输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="next-head-count" content="2" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="true"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="preload"
href="/_next/static/css/4456f66f8b03e6d5.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/4456f66f8b03e6d5.css"
data-n-g=""
/>
<noscript data-n-css=""></noscript>
<script
defer=""
nomodule=""
src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"
></script>
<script
src="/_next/static/chunks/webpack-8fa1640cc84ba8fe.js"
defer=""
></script>
<script
src="/_next/static/chunks/framework-8c5acb0054140387.js"
defer=""
></script>
<script
src="/_next/static/chunks/main-b482fffd82fa7e1c.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/_app-3893aca8cac41098.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/article/%5Bslug%5D-e681ee69432676d8.js"
defer=""
></script>
<script
src="/_next/static/KeigBc207aj9hxoHz3XH_/_buildManifest.js"
defer=""
></script>
<script
src="/_next/static/KeigBc207aj9hxoHz3XH_/_ssgManifest.js"
defer=""
></script>
<style
data-href="https://fonts.googleapis.com/css2?family=Lato&family=Merriweather&display=swap"
>
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHvxo.woff)
format("woff");
}
@font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5OeA.woff)
format("woff");
}
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXiWtFCc.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-cSZMdeX3rsHo.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF,
U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-eCZMdeX3rsHo.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-cyZMdeX3rsHo.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-ciZMdeX3rsHo.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
</head>
<body>
<div id="__next">
<div class="container font-sans">
<header>
Header
<!-- -->2 - 0 - 2023 - 4
</header>
<div>
<div>
<img
src="/images/screen_0_2752e34ba5_original.webp"
alt="screen-0.webp"
/>
</div>
<div class="text-5xl">
How To Climb The Career Latter And Don’t Waste Your Youth
</div>
<div class="text-xl">
Morbi fermentum purus metus, eu consequat est congue ut. Proin ut
eros ac tortor imperdiet convallis nec eu dui. Curabitur sed
fermentum arcu. Vestibulum sed egestas purus. Donec dapibus
malesuada eros quis suscipit. Praesent fermentum ipsum nec elit
finibus, at cursus augue maximus. Praesent blandit efficitur
bibendum. Integer tincidunt iaculis nunc, eget pharetra sem eleifend
faucibus. Sed fermentum massa vitae sapien sodales, quis feugiat
dolor condimentum. Aliquam eget leo nunc. Quisque ut nisi vulputate,
euismod sem at, mollis leo. Vestibulum et tincidunt ex. In dignissim
ex ante, a porta nisi rhoncus ut. Pellentesque dictum blandit elit,
finibus suscipit tortor luctus ut. Sed aliquet leo id lacus feugiat,
et molestie ante pretium. Proin nec augue et velit tincidunt
feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Mauris blandit eros a mi pharetra
molestie ut efficitur libero. Donec ut luctus risus. In ut
condimentum nibh. Nunc eu porta ligula. Aliquam erat volutpat.
Maecenas sodales lectus vitae est tincidunt consequat.
</div>
<div class="text-xl">
Proin id ultricies justo, fringilla pharetra enim. Phasellus
vehicula pretium malesuada. Proin dolor enim, suscipit vitae luctus
non, maximus malesuada odio. Phasellus condimentum tellus eget quam
egestas, a lobortis mauris venenatis. Vestibulum id leo quis felis
suscipit pulvinar. Duis aliquam mi urna, eu bibendum ante convallis
eu. Praesent sit amet enim purus. Sed egestas pretium purus id
consectetur. Fusce gravida ipsum tellus, quis pharetra lorem
volutpat a. Proin feugiat tincidunt mattis. Integer laoreet nulla
vel viverra semper. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Maecenas facilisis
felis lorem, quis tempus nisi sagittis sit amet. In bibendum sodales
risus, at convallis mi pellentesque sit amet. Morbi magna mauris,
condimentum non interdum sed, tincidunt vitae odio. Fusce maximus
mauris nec ex mattis, sed maximus enim gravida. Maecenas sit amet
metus odio. Vivamus interdum orci nibh, non tincidunt eros vulputate
non. Ut gravida nulla nunc. Ut facilisis odio eget est blandit
egestas.
</div>
</div>
</div>
</div>
<script id="__NEXT_DATA__" type="application/json">
{
"props": {
"pageProps": {
"id": 2,
"attributes": {
"title": "How To Climb The Career Latter And Don’t Waste Your Youth",
"slug": "how-to-climb-the-career-latter-and-don-t-waste-your-youth",
"description": "Morbi fermentum purus metus, eu consequat est congue ut. Proin ut eros ac tortor imperdiet convallis nec eu dui.",
"introduction": "Morbi fermentum purus metus, eu consequat est congue ut. Proin ut eros ac tortor imperdiet convallis nec eu dui. Curabitur sed fermentum arcu. Vestibulum sed egestas purus. Donec dapibus malesuada eros quis suscipit. Praesent fermentum ipsum nec elit finibus, at cursus augue maximus. Praesent blandit efficitur bibendum. Integer tincidunt iaculis nunc, eget pharetra sem eleifend faucibus. Sed fermentum massa vitae sapien sodales, quis feugiat dolor condimentum. Aliquam eget leo nunc. Quisque ut nisi vulputate, euismod sem at, mollis leo.\n\nVestibulum et tincidunt ex. In dignissim ex ante, a porta nisi rhoncus ut. Pellentesque dictum blandit elit, finibus suscipit tortor luctus ut. Sed aliquet leo id lacus feugiat, et molestie ante pretium. Proin nec augue et velit tincidunt feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris blandit eros a mi pharetra molestie ut efficitur libero. Donec ut luctus risus. In ut condimentum nibh. Nunc eu porta ligula. Aliquam erat volutpat. Maecenas sodales lectus vitae est tincidunt consequat.",
"content": "Proin id ultricies justo, fringilla pharetra enim. Phasellus vehicula pretium malesuada. Proin dolor enim, suscipit vitae luctus non, maximus malesuada odio. Phasellus condimentum tellus eget quam egestas, a lobortis mauris venenatis. Vestibulum id leo quis felis suscipit pulvinar. Duis aliquam mi urna, eu bibendum ante convallis eu. Praesent sit amet enim purus. Sed egestas pretium purus id consectetur.\n\nFusce gravida ipsum tellus, quis pharetra lorem volutpat a. Proin feugiat tincidunt mattis. Integer laoreet nulla vel viverra semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas facilisis felis lorem, quis tempus nisi sagittis sit amet. In bibendum sodales risus, at convallis mi pellentesque sit amet. Morbi magna mauris, condimentum non interdum sed, tincidunt vitae odio. Fusce maximus mauris nec ex mattis, sed maximus enim gravida. Maecenas sit amet metus odio. Vivamus interdum orci nibh, non tincidunt eros vulputate non. Ut gravida nulla nunc. Ut facilisis odio eget est blandit egestas.",
"keywords": ["sample", "tagssample", "anothersampletag"],
"links": null,
"date": null,
"createdAt": "2022-12-11T02:12:02.858Z",
"updatedAt": "2023-01-16T21:24:20.921Z",
"publishedAt": "2022-12-11T02:52:06.237Z",
"images": {
"data": [
{
"id": 3,
"attributes": {
"name": "screen-0.webp",
"alternativeText": "screen-0.webp",
"caption": "screen-0.webp",
"width": 600,
"height": 1024,
"formats": {
"large": {
"ext": ".webp",
"url": "/uploads/large_screen_0_2752e34ba5.webp",
"hash": "large_screen_0_2752e34ba5",
"mime": "image/webp",
"name": "large_screen-0.webp",
"path": null,
"size": 39.71,
"width": 586,
"height": 1000
},
"small": {
"ext": ".webp",
"url": "/uploads/small_screen_0_2752e34ba5.webp",
"hash": "small_screen_0_2752e34ba5",
"mime": "image/webp",
"name": "small_screen-0.webp",
"path": null,
"size": 18.08,
"width": 293,
"height": 500
},
"medium": {
"ext": ".webp",
"url": "/uploads/medium_screen_0_2752e34ba5.webp",
"hash": "medium_screen_0_2752e34ba5",
"mime": "image/webp",
"name": "medium_screen-0.webp",
"path": null,
"size": 28.94,
"width": 439,
"height": 750
},
"thumbnail": {
"ext": ".webp",
"url": "/uploads/thumbnail_screen_0_2752e34ba5.webp",
"hash": "thumbnail_screen_0_2752e34ba5",
"mime": "image/webp",
"name": "thumbnail_screen-0.webp",
"path": null,
"size": 4.03,
"width": 91,
"height": 156
}
},
"hash": "screen_0_2752e34ba5",
"ext": ".webp",
"mime": "image/webp",
"size": 44.81,
"url": "/uploads/screen_0_2752e34ba5.webp",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2022-12-26T17:13:57.779Z",
"updatedAt": "2022-12-26T17:13:57.779Z"
}
}
]
}
},
"src": "screen_0_2752e34ba5_original.webp"
},
"__N_SSG": true
},
"page": "/article/[slug]",
"query": {
"slug": "how-to-climb-the-career-latter-and-don-t-waste-your-youth"
},
"buildId": "KeigBc207aj9hxoHz3XH_",
"isFallback": false,
"gsp": true,
"scriptLoader": []
}
</script>
</body>
</html>答： 暂无答案
评论