{"id":494185,"date":"2026-09-10T08:28:57","date_gmt":"2026-09-10T08:28:57","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=494185"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=494185","title":{"rendered":"Next.js, image + metadata + build-\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0434\u043e\u043c"},"content":{"rendered":"
\n

\u0412 Next.js \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, metadata \u0438 production build \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. next\/image<\/code> \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0438 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0435\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. Metadata API \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 <title><\/code>, description, Open Graph \u0438 Twitter metadata. next build<\/code> \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 production-\u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u0448\u0438\u0431\u043a\u0438 \u0432 \u044d\u0442\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u0447\u0430\u0441\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0435 next dev<\/code>. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, title \u0435\u0441\u0442\u044c. \u041d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u0434\u043e\u043c\u0435\u043d\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 Image<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u0435\u0449\u0451\u043d\u043d\u044b\u0439 URL, Open Graph \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 localhost<\/a>, production build \u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0435. \u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u044d\u0442\u0438 \u0442\u0440\u0438 \u0447\u0430\u0441\u0442\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u00a0Goods Finder<\/a>.<\/p>\n

next\/image<\/h3>\n

Image<\/code> \u0438\u0437 next\/image<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0443\u0442\u044c, \u0432\u043d\u0435\u0448\u043d\u0438\u0439 URL \u0438\u043b\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 import. \u0414\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437 public<\/code> \u043f\u0443\u0442\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043a\u043e\u0440\u043d\u044f \u0441\u0430\u0439\u0442\u0430.<\/p>\n

import Image from \"next\/image\";export default function Page() {  return (    <Image      src=\"\/og-goods-finder.png\"      alt=\"\u041e\u0431\u043b\u043e\u0436\u043a\u0430\"      width={1200}      height={630}      style={{ width: \"100%\", height: \"auto\" }}    \/>  );}                  <\/code>
<\/a><\/div><\/pre>\n
width<\/code> \u0438 height<\/code> \u0437\u0430\u0434\u0430\u044e\u0442 intrinsic-\u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044e, CSS \u0437\u0430\u0434\u0430\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n
\u041f\u0440\u0438 fill<\/code> \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443.<\/p>\n
<div className=\"relative aspect-[4\/3]\">  <Image    src=\"\/product.png\"    alt=\"\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0442\u043e\u0432\u0430\u0440\u0430\"    fill    sizes=\"(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw\"    className=\"object-contain\"  \/><\/div>                  <\/code>
<\/a><\/div><\/pre>\n
\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0437\u0430\u0434\u0430\u0451\u0442 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e, Image<\/code> \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u043b\u043e\u0449\u0430\u0434\u044c.<\/p>\n
sizes<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 viewport. \u0411\u0435\u0437 \u043d\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438 fill<\/code> \u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 \u0448\u0438\u0440\u0438\u043d\u044b 100vw<\/code> \u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 srcset<\/code> \u0444\u0430\u0439\u043b \u043a\u0440\u0443\u043f\u043d\u0435\u0435 \u043d\u0443\u0436\u043d\u043e\u0433\u043e.<\/p>\n
\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h3>\n
\u0412\u043d\u0435\u0448\u043d\u0438\u0439 URL \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0432 next.config<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f images.remotePatterns<\/code>.<\/p>\n
\/** @type {import(\"next\").NextConfig} *\/const nextConfig = {  images: {    remotePatterns: [      {        protocol: \"https\",        hostname: \"cdn.example.com\",        port: \"\",        pathname: \"\/product-images\/**\",        search: \"\",      },    ],  },};export default nextConfig;                  <\/code>
<\/a><\/div><\/pre>\n
Next \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 protocol, hostname, port, pathname \u0438 search \u0441 URL \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041d\u0435\u0441\u043e\u0432\u043f\u0430\u0432\u0448\u0438\u0439 URL Image Optimizer \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442.<\/p>\n
 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0441\u0435\u0433\u043c\u0435\u043d\u0442. <\/em>*<\/code> \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043d\u0446\u0435 pathname \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e subdomain \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 hostname.<\/p>\n
\u0428\u0438\u0440\u043e\u043a\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0432\u0440\u043e\u0434\u0435 hostname: \"**\"<\/code> \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0430\u0434\u0440\u0435\u0441\u043e\u0432. \u0423\u0437\u043a\u0438\u0439 pattern \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0442 host \u0438 path, \u043e\u0442\u043a\u0443\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438.<\/p>\n
\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0451\u043d cdn.dummyjson.com<\/code><\/a> \u0438 \u043f\u0443\u0442\u044c \/product-images\/**<\/code>. \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 thumbnail \u0438\u0437 API, \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442 URL \u0432 Image<\/code>.<\/p>\n
\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430<\/h3>\n
\u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0441 loading=\"lazy\"<\/code> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0438\u043d\u0430\u0447\u0435. \u0412 Next.js 16 \u0441\u0442\u0430\u0440\u044b\u0439 prop priority<\/code> \u043f\u043e\u043c\u0435\u0447\u0435\u043d deprecated. \u0412 API \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f preload<\/code>.<\/p>\n
<Image  src={item.thumbnail}  alt={item.title}  fill  sizes=\"(min-width: 640px) 50vw, 100vw\"  preload\/>                  <\/code>
<\/a><\/div><\/pre>\n
preload<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 <link><\/code> \u0432 <head><\/code>. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 loading=\"eager\"<\/code> \u0438\u043b\u0438 fetchPriority=\"high\"<\/code> \u0434\u043b\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u0433\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 preload \u043d\u0435 \u043d\u0443\u0436\u0435\u043d. \u0412\u0441\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c preload \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f. \u041a\u0430\u043d\u0434\u0438\u0434\u0430\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0435\u0434\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n
Metadata \u0432 layout<\/h3>\n
\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 metadata \u043c\u043e\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 layout.js<\/code> \u0438\u043b\u0438 page.js<\/code>.<\/p>\n
export const metadata = {  title: {    default: \"Store\",    template: \"%s - Store\",  },  description: \"\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0442\u043e\u0432\u0430\u0440\u043e\u0432\",};                  <\/code>
<\/a><\/div><\/pre>\n
\u0414\u043e\u0447\u0435\u0440\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439 title.<\/p>\n
export const metadata = {  title: \"\u0421\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432\",};                  <\/code>
<\/a><\/div><\/pre>\n
\u0421 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u0438\u0437 layout \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 <title><\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u0438\u0437 title \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043e\u0431\u0449\u0435\u0433\u043e \u0438\u043c\u0435\u043d\u0438 \u0441\u0430\u0439\u0442\u0430.<\/p>\n
Open Graph \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 layout.<\/p>\n
export const metadata = {  title: \"Store\",  description: \"\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0442\u043e\u0432\u0430\u0440\u043e\u0432\",  openGraph: {    title: \"Store\",    description: \"\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0442\u043e\u0432\u0430\u0440\u043e\u0432\",    type: \"website\",    images: [      {        url: \"\/og.png\",        width: 1200,        height: 630,        alt: \"Store\",      },    ],  },};                  <\/code>
<\/a><\/div><\/pre>\n
\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \/og.png<\/code> \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0430\u0434\u0440\u0435\u0441.<\/p>\n
metadataBase<\/h3>\n
metadataBase<\/code> \u0437\u0430\u0434\u0430\u0451\u0442 origin \u0434\u043b\u044f URL \u0432\u043d\u0443\u0442\u0440\u0438 metadata.<\/p>\n
const metadataBase = new URL(  process.env.NEXT_PUBLIC_SITE_URL ?? \"http:\/\/localhost:3000\");export const metadata = {  metadataBase,  openGraph: {    images: [      {        url: \"\/og.png\",        width: 1200,        height: 630,      },    ],  },};                  <\/code>
<\/a><\/div><\/pre>\n
\u041f\u0440\u0438 metadataBase = <\/code>https:\/\/example.com<\/code><\/a> \u043f\u0443\u0442\u044c \/og.png<\/code> \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 https:\/\/example.com\/og.png<\/code><\/a>.<\/p>\n
\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 URL \u0432 metadata \u0431\u0435\u0437 metadataBase<\/code> \u043c\u043e\u0433\u0443\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c build. \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 URL \u043e\u0442 metadataBase<\/code> \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442.<\/p>\n
Fallback \u043d\u0430 localhost<\/a> \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435. \u0412 production \u0442\u0430\u043a\u043e\u0439 fallback \u043d\u0435 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438. \u0421\u0431\u043e\u0440\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0439\u0442\u0438 \u0441 http:\/\/localhost:3000<\/code><\/a> \u0432\u043d\u0443\u0442\u0440\u0438 metadata. Production env \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n
\u0414\u043b\u044f production \u043c\u043e\u0436\u043d\u043e \u0443\u0431\u0440\u0430\u0442\u044c fallback.<\/p>\n
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;if (!siteUrl) {  throw new Error(\"NEXT_PUBLIC_SITE_URL is required\");}export const metadata = {  metadataBase: new URL(siteUrl),};                  <\/code>
<\/a><\/div><\/pre>\n
\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441 \u044f\u0432\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u043e\u0439.<\/p>\n
generateMetadata<\/h3>\n
\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 metadata<\/code> \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u0441 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u043c\u0438 title \u0438 description. Dynamic route \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c metadata \u043f\u043e params<\/code>.<\/p>\n
export async function generateMetadata({ params }) {  const { id } = await params;  const item = await getProductById(id);  return {    title: item.title,    description: item.description,    openGraph: {      title: item.title,      description: item.description,      url: `\/goods\/${id}`,      images: [        {          url: item.thumbnail,          alt: item.title,        },      ],    },    twitter: {      card: \"summary_large_image\",      title: item.title,      description: item.description,      images: [item.thumbnail],    },  };}                  <\/code>
<\/a><\/div><\/pre>\n
generateMetadata<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 dynamic segment \u0447\u0435\u0440\u0435\u0437 params<\/code>.<\/p>\n
Description \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u043f\u043e \u0434\u043b\u0438\u043d\u0435 \u0434\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 metadata.<\/p>\n
function toShortText(value, maxLen = 160) {  const text = String(value || \"\")    .trim()    .replace(\/\\s+\/g, \" \");  if (!text) return \"\";  if (text.length <= maxLen) return text;  return `${text.slice(0, maxLen - 1)}\u2026`;}                  <\/code>
<\/a><\/div><\/pre>\n
\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u043e\u0431\u0440\u0435\u0437\u0430\u0435\u0442 \u0435\u0451 \u0434\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0434\u043b\u0438\u043d\u044b.<\/p>\n
\u041e\u0448\u0438\u0431\u043a\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f metadata \u0442\u043e\u0436\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n
export async function generateMetadata({ params }) {  const { id } = await params;  try {    const item = await getProductById(id);    return {      title: item.title,      description: toShortText(item.description),    };  } catch {    return {      title: \"\u0422\u043e\u0432\u0430\u0440 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\",      description: \"\u0417\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0439 \u0442\u043e\u0432\u0430\u0440 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442.\",    };  }}                  <\/code>
<\/a><\/div><\/pre>\n
\u041f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 fallback metadata.<\/p>\n
Open Graph \u0438 remotePatterns<\/h3>\n
remotePatterns<\/code> \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a next\/image<\/code>. \u041f\u043e\u043b\u0435 openGraph.images<\/code> \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 URL \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 metadata.<\/p>\n
\u041e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 thumbnail \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0432\u0443\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<\/p>\n
<Image  src={item.thumbnail}  alt={item.title}  width={600}  height={400}\/>                  <\/code>
<\/a><\/div><\/pre>\n
\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e URL \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 remotePatterns<\/code>.<\/p>\n
return {  openGraph: {    images: [item.thumbnail],  },};                  <\/code>
<\/a><\/div><\/pre>\n
\u0417\u0434\u0435\u0441\u044c Next \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 <meta property=\"og:image\"><\/code> \u0441 URL.<\/p>\n
Dev \u0438 build<\/h3>\n
next dev<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 development server. next build<\/code> \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 production-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412 package.json \u043e\u0431\u044b\u0447\u043d\u043e \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b.<\/p>\n
{  \"scripts\": {    \"dev\": \"next dev\",    \"build\": \"next build\",    \"start\": \"next start\",    \"lint\": \"eslint\"  }}                <\/code>
<\/a><\/div><\/pre>\n
\u0412 Next.js 16 next build<\/code> \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 ESLint. \u041a\u043e\u043c\u0430\u043d\u0434\u0430 next lint<\/code> \u0442\u043e\u0436\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u0430.<\/p>\n
\u041f\u0435\u0440\u0435\u0434 production \u0441\u0431\u043e\u0440\u043a\u043e\u0439 lint \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n
npm run lintnpm run build                  <\/code>
<\/a><\/div><\/pre>\n
\u041f\u0435\u0440\u0432\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 ESLint. \u0412\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 production-\u0432\u0435\u0440\u0441\u0438\u044e Next.js.<\/p>\n
Build \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 production-\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0438 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 Next \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438. \u0427\u0430\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f runtime, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e build \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f production server.<\/p>\n
npm run start    <\/code>
<\/a><\/div><\/pre>\n
next start<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e next build<\/code>.<\/p>\n
\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 production-\u0440\u0435\u0436\u0438\u043c\u0430<\/h3>\n
\u041f\u043e\u0441\u043b\u0435 next start<\/code> \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0441\u043f\u0438\u0441\u043e\u043a \u0438 dynamic route. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a Image Optimizer.<\/p>\n
\u0423 dynamic page \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f <head><\/code>. Title \u0438 description \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. og:url<\/code> \u0438 og:image<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 production origin, \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 URL \u0447\u0435\u0440\u0435\u0437 metadataBase<\/code>.<\/p>\n
\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 id \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 404. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0441\u043b\u0435 reload, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434.<\/p>\n
Production env \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u0434. NEXT_PUBLIC_SITE_URL<\/code>, API base URL \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0434\u043e \u0432\u044b\u043a\u043b\u0430\u0434\u043a\u0438.<\/p>\n
\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u043f\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c URL. \u041d\u043e\u0432\u044b\u0439 hostname \u0438\u043b\u0438 \u043d\u043e\u0432\u044b\u0439 pathname \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f remotePatterns<\/code>.<\/p>\n
\u041f\u0435\u0440\u0435\u0434 \u0434\u0435\u043f\u043b\u043e\u0435\u043c<\/h3>\n
npm run lintnpm run buildnpm run start                 <\/code>
<\/a><\/div><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b, dynamic route, 404, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 metadata. Dev server \u0432 \u044d\u0442\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0435 \u0432\u0445\u043e\u0434\u0438\u0442.<\/p>\n<\/div>\n
\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1080700\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u0412 Next.js \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, metadata \u0438 production build \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. next\/image \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0438 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0435\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. Metadata API \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 <title>, description, Open Graph \u0438 Twitter metadata. next build \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 production-\u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u0448\u0438\u0431\u043a\u0438 \u0432 \u044d\u0442\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u0447\u0430\u0441\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0435 next dev. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, title \u0435\u0441\u0442\u044c. \u041d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u0434\u043e\u043c\u0435\u043d\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 Image \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u0435\u0449\u0451\u043d\u043d\u044b\u0439 URL, Open Graph \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 localhost, production build \u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0435. \u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u044d\u0442\u0438 \u0442\u0440\u0438 \u0447\u0430\u0441\u0442\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u00a0Goods Finder.next\/imageImage \u0438\u0437 next\/image \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0443\u0442\u044c, \u0432\u043d\u0435\u0448\u043d\u0438\u0439 URL \u0438\u043b\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 import. \u0414\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437 public \u043f\u0443\u0442\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043a\u043e\u0440\u043d\u044f \u0441\u0430\u0439\u0442\u0430.import Image from «next\/image»;export default function Page() {  return (    <Image      src=»\/og-goods-finder.png»      alt=»\u041e\u0431\u043b\u043e\u0436\u043a\u0430»      width={1200}      height={630}      style={{ width: «100%», height: «auto» }}    \/>  );}                  width \u0438 height \u0437\u0430\u0434\u0430\u044e\u0442 intrinsic-\u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044e, CSS \u0437\u0430\u0434\u0430\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.\u041f\u0440\u0438 fill \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443.<div className=»relative aspect-[4\/3]»>  <Image    src=»\/product.png»    alt=»\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0442\u043e\u0432\u0430\u0440\u0430»    fill    sizes=»(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw»    className=»object-contain»  \/><\/div>                  \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0437\u0430\u0434\u0430\u0451\u0442 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e, Image \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u043b\u043e\u0449\u0430\u0434\u044c.sizes \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 viewport. \u0411\u0435\u0437 \u043d\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438 fill \u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 \u0448\u0438\u0440\u0438\u043d\u044b 100vw \u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 srcset \u0444\u0430\u0439\u043b \u043a\u0440\u0443\u043f\u043d\u0435\u0435 \u043d\u0443\u0436\u043d\u043e\u0433\u043e.\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0412\u043d\u0435\u0448\u043d\u0438\u0439 URL \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0432 next.config. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f images.remotePatterns.\/** @type {import(«next»).NextConfig} *\/const nextConfig = {  images: {    remotePatterns: [      {        protocol: «https»,        hostname: «cdn.example.com»,        port: «»,        pathname: «\/product-images\/**»,        search: «»,      },    ],  },};export default nextConfig;                  Next \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 protocol, hostname, port, pathname \u0438 search \u0441 URL \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041d\u0435\u0441\u043e\u0432\u043f\u0430\u0432\u0448\u0438\u0439 URL Image Optimizer \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442. \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0441\u0435\u0433\u043c\u0435\u043d\u0442. * \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043d\u0446\u0435 pathname \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e subdomain \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 hostname.\u0428\u0438\u0440\u043e\u043a\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0432\u0440\u043e\u0434\u0435 hostname: «**» \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0430\u0434\u0440\u0435\u0441\u043e\u0432. \u0423\u0437\u043a\u0438\u0439 pattern \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0442 host \u0438 path, \u043e\u0442\u043a\u0443\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438.\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0451\u043d cdn.dummyjson.com \u0438 \u043f\u0443\u0442\u044c \/product-images\/**. \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 thumbnail \u0438\u0437 API, \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442 URL \u0432 Image.\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430\u041e\u0431\u044b\u0447\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0441 loading=»lazy» \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0438\u043d\u0430\u0447\u0435. \u0412 Next.js 16 \u0441\u0442\u0430\u0440\u044b\u0439 prop priority \u043f\u043e\u043c\u0435\u0447\u0435\u043d deprecated. \u0412 API \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f preload.<Image  src={item.thumbnail}  alt={item.title}  fill  sizes=»(min-width: 640px) 50vw, 100vw»  preload\/>                  preload \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 <link> \u0432 <head>. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 loading=»eager» \u0438\u043b\u0438 fetchPriority=»high» \u0434\u043b\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u0433\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 preload \u043d\u0435 \u043d\u0443\u0436\u0435\u043d. \u0412\u0441\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c preload \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f. \u041a\u0430\u043d\u0434\u0438\u0434\u0430\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0435\u0434\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430.Metadata \u0432 layout\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 metadata \u043c\u043e\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 layout.js \u0438\u043b\u0438 page.js.export const metadata = {  title: {    default: «Store»,    template: «%s — Store»,  },  description: «\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0442\u043e\u0432\u0430\u0440\u043e\u0432»,};                  \u0414\u043e\u0447\u0435\u0440\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439 title.export const metadata = {  title: «\u0421\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432»,};                  \u0421 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u0438\u0437 layout \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 <title> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u0438\u0437 title \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043e\u0431\u0449\u0435\u0433\u043e \u0438\u043c\u0435\u043d\u0438 \u0441\u0430\u0439\u0442\u0430.Open Graph \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 layout.export const metadata = {  title: «Store»,  description: «\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0442\u043e\u0432\u0430\u0440\u043e\u0432»,  openGraph: {    title: «Store»,    description: «\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0442\u043e\u0432\u0430\u0440\u043e\u0432»,    type: «website»,    images: [      {        url: «\/og.png»,        width: 1200,        height: 630,        alt: «Store»,      },    ],  },};                  \u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \/og.png \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0430\u0434\u0440\u0435\u0441.metadataBasemetadataBase \u0437\u0430\u0434\u0430\u0451\u0442 origin \u0434\u043b\u044f URL \u0432\u043d\u0443\u0442\u0440\u0438 metadata.const metadataBase = new URL(  process.env.NEXT_PUBLIC_SITE_URL ?? «http:\/\/localhost:3000»);export const metadata = {  metadataBase,  openGraph: {    images: [      {        url: «\/og.png»,        width: 1200,        height: 630,      },    ],  },};                  \u041f\u0440\u0438 metadataBase = https:\/\/example.com \u043f\u0443\u0442\u044c \/og.png \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 https:\/\/example.com\/og.png.\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 URL \u0432 metadata \u0431\u0435\u0437 metadataBase \u043c\u043e\u0433\u0443\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c build. \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 URL \u043e\u0442 metadataBase \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442.Fallback \u043d\u0430 localhost \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435. \u0412 production \u0442\u0430\u043a\u043e\u0439 fallback \u043d\u0435 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438. \u0421\u0431\u043e\u0440\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0439\u0442\u0438 \u0441 http:\/\/localhost:3000 \u0432\u043d\u0443\u0442\u0440\u0438 metadata. Production env \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.\u0414\u043b\u044f production \u043c\u043e\u0436\u043d\u043e \u0443\u0431\u0440\u0430\u0442\u044c fallback.const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;if (!siteUrl) {  throw new Error(«NEXT_PUBLIC_SITE_URL is required»);}export const metadata = {  metadataBase: new URL(siteUrl),};                  \u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441 \u044f\u0432\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u043e\u0439.generateMetadata\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 metadata \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u0441 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u043c\u0438 title \u0438 description. Dynamic route \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c metadata \u043f\u043e params.export async function generateMetadata({ params }) {  const { id } = await params;  const item = await getProductById(id);  return {    title: item.title,    description: item.description,    openGraph: {      title: item.title,      description: item.description,      url: `\/goods\/${id}`,      images: [        {          url: item.thumbnail,          alt: item.title,        },      ],    },    twitter: {      card: «summary_large_image»,      title: item.title,      description: item.description,      images: [item.thumbnail],    },  };}                  generateMetadata \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 dynamic segment \u0447\u0435\u0440\u0435\u0437 params.Description \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u043f\u043e \u0434\u043b\u0438\u043d\u0435 \u0434\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 metadata.function toShortText(value, maxLen = 160) {  const text = String(value || «»)    .trim()    .replace(\/\\s+\/g, » «);  if (!text) return «»;  if (text.length <= maxLen) return text;  return `${text.slice(0, maxLen — 1)}\u2026`;}                  \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u043e\u0431\u0440\u0435\u0437\u0430\u0435\u0442 \u0435\u0451 \u0434\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0434\u043b\u0438\u043d\u044b.\u041e\u0448\u0438\u0431\u043a\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f metadata \u0442\u043e\u0436\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u0434.export async function generateMetadata({ params }) {  const { id } = await params;  try {    const item = await getProductById(id);    return {      title: item.title,      description: toShortText(item.description),    };  } catch {    return {      title: «\u0422\u043e\u0432\u0430\u0440 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d»,      description: «\u0417\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0439 \u0442\u043e\u0432\u0430\u0440 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442.»,    };  }}                  \u041f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 fallback metadata.Open Graph \u0438 remotePatternsremotePatterns \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a next\/image. \u041f\u043e\u043b\u0435 openGraph.images \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 URL \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 metadata.\u041e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 thumbnail \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0432\u0443\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<Image  src={item.thumbnail}  alt={item.title}  width={600}  height={400}\/>                  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e URL \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 remotePatterns.return {  openGraph: {    images: [item.thumbnail],  },};                  \u0417\u0434\u0435\u0441\u044c Next \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 <meta property=»og:image»> \u0441 URL.Dev \u0438 buildnext dev \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 development server. next build \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 production-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412 package.json \u043e\u0431\u044b\u0447\u043d\u043e \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b.{  «scripts»: {    «dev»: «next dev»,    «build»: «next build»,    «start»: «next start»,    «lint»: «eslint»  }}                \u0412 Next.js 16 next build \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 ESLint. \u041a\u043e\u043c\u0430\u043d\u0434\u0430 next lint \u0442\u043e\u0436\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u0430.\u041f\u0435\u0440\u0435\u0434 production \u0441\u0431\u043e\u0440\u043a\u043e\u0439 lint \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.npm run lintnpm run build                  \u041f\u0435\u0440\u0432\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 ESLint. \u0412\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 production-\u0432\u0435\u0440\u0441\u0438\u044e Next.js.Build \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 production-\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0438 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 Next \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438. \u0427\u0430\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f runtime, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e build \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f production server.npm run start    next start \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e next build.\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 production-\u0440\u0435\u0436\u0438\u043c\u0430\u041f\u043e\u0441\u043b\u0435 next start \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0441\u043f\u0438\u0441\u043e\u043a \u0438 dynamic route. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a Image Optimizer.\u0423 dynamic page \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f <head>. Title \u0438 description \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. og:url \u0438 og:image \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 production origin, \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 URL \u0447\u0435\u0440\u0435\u0437 metadataBase.\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 id \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 404. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0441\u043b\u0435 reload, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434.Production env \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u0434. NEXT_PUBLIC_SITE_URL, API base URL \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0434\u043e \u0432\u044b\u043a\u043b\u0430\u0434\u043a\u0438.\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u043f\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c URL. \u041d\u043e\u0432\u044b\u0439 hostname \u0438\u043b\u0438 \u043d\u043e\u0432\u044b\u0439 pathname \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f remotePatterns.\u041f\u0435\u0440\u0435\u0434 \u0434\u0435\u043f\u043b\u043e\u0435\u043cnpm run lintnpm run buildnpm run start                 \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b, dynamic route, 404, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 metadata. Dev server \u0432 \u044d\u0442\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0435 \u0432\u0445\u043e\u0434\u0438\u0442.\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1080700\/<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-494185","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/494185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=494185"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/494185\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=494185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=494185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=494185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}