fix meta anf first page

src/app/[locale]/(main)/@news/page.tsx

@@ -1,71 +1,40 @@
 import React from 'react';
 import { useTranslations } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import {getTranslations, unstable_setRequestLocale} from 'next-intl/server';
 import { i18nText } from '../../../../i18nKeys';
+import {fetchBlogPosts} from "../../../../lib/contentful/blogPosts";
+import Link from "next/link";
 
-export default function News({ params: { locale } }: { params: { locale: string }}) {
+export default async function News({params: {locale}}: { params: { locale: string } }) {
     unstable_setRequestLocale(locale);
-    const t = useTranslations('Main');
+    const t = await getTranslations('Main');
+    const {data, total} = await fetchBlogPosts({preview: false, sticky: true})
 
     return (
         <div className="main-articles">
             <div className="b-inner">
                 <h2 className="title-h2">{t('news')}</h2>
                 <div className="row">
-                    <div className="col-lg-4 col-md-6 col-sm-6">
+                    {data.map((item, i) => (
+                        <div className="col-lg-4 col-md-6 col-sm-6" key={'news' + i}>
                             <div className="b-article">
                                 <div className="b-article__image">
-                                <img className="" src="/images/article.png" alt=""/>
+                                    <img className="" src={item.listImage?.src} alt={item.listImage?.alt}/>
                                 </div>
                                 <div className="b-article__inner">
-                                <div className="b-article__title">News Headline</div>
+                                    <div className="b-article__title">{item.title}</div>
                                     <div className="b-article__text">
-                                    The program not only focuses on a financial perspective, but allows you to study
-                                    performance from many angles, such as human resources management, IT, operations
-                                    management, risks etc.
+                                        {item.excerpt}
                                     </div>
-                                <a href="#" className="b-article__link">{i18nText('readMore', locale)}
+                                    <Link href={`/${locale}/blog/${item.slug}`} className="b-article__link">
+                                        {i18nText('readMore', locale)}
                                         <img className="" src="/images/chevron-forward.svg" alt=""/>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 d-none d-lg-block">
-                        <div className="b-article">
-                            <div className="b-article__image">
-                                <img className="" src="/images/article.png" alt=""/>
-                            </div>
-                            <div className="b-article__inner">
-                                <div className="b-article__title">News Headline</div>
-                                <div className="b-article__text">
-                                    The program not only focuses on a financial perspective, but allows you to study
-                                    performance from many angles, such as human resources management, IT, operations
-                                    management, risks etc.
-                                </div>
-                                <a href="#" className="b-article__link">{i18nText('readMore', locale)}
-                                    <img className="" src="/images/chevron-forward.svg" alt=""/>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-4 d-none d-lg-block">
-                        <div className="b-article">
-                            <div className="b-article__image">
-                                <img className="" src="/images/article.png" alt=""/>
-                            </div>
-                            <div className="b-article__inner">
-                                <div className="b-article__title">News Headline</div>
-                                <div className="b-article__text">
-                                    The program not only focuses on a financial perspective, but allows you to study
-                                    performance from many angles, such as human resources management, IT, operations
-                                    management, risks etc.
-                                </div>
-                                <a href="#" className="b-article__link">{i18nText('readMore', locale)}
-                                    <img className="" src="/images/chevron-forward.svg" alt=""/>
-                                </a>
+                                    </Link>
                                 </div>
                             </div>
                         </div>
+                    ))}
+
                 </div>
             </div>
         </div>

src/app/[locale]/blog/[slug]/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Metadata } from 'next';
+import type {Metadata, ResolvingMetadata} from 'next';
 import { draftMode } from 'next/headers'
 import { notFound } from 'next/navigation';
 import {fetchBlogPost, fetchBlogPosts, Widget} from "../../../../lib/contentful/blogPosts";
@@ -22,7 +22,8 @@ export async function generateMetadata({ params }: BlogPostPageProps, parent: Re
     }
 
     return {
-        title: blogPost.title
+        title: blogPost.title,
+        description: blogPost.metaDescription
     }
 }
 

src/lib/contentful/blogPosts.ts

@@ -68,15 +68,16 @@ interface FetchBlogPostsOptions {
     local?: string
     category?: string
     page?: number
+    sticky?: boolean
 }
-export async function fetchBlogPosts({ preview, category, page }: FetchBlogPostsOptions): Promise<{
+export async function fetchBlogPosts({ preview, category, page, sticky }: FetchBlogPostsOptions): Promise<{
     total: number;
     data: BlogPost[]
 }> {
     const contentful = contentfulClient({ preview })
     const query = {
         content_type: 'blogPost',
-        select: ['fields.title', 'fields.excerpt', 'fields.author', 'fields.listImage', 'fields.author', 'fields.category', 'sys.createdAt', 'fields.slug'],
+        select: ['fields.title', 'fields.excerpt', 'fields.author', 'fields.listImage', 'fields.author', 'fields.category', 'sys.createdAt', 'fields.slug', 'fields.metaDescription'],
         order: ['sys.createdAt'],
     }
     if (category){
@@ -84,11 +85,18 @@ export async function fetchBlogPosts({ preview, category, page }: FetchBlogPosts
         query['fields.category.sys.contentType.sys.id']='blogPostCategory'
     }
 
+
     if(page){
         query['limit'] = pageSize
         query['skip'] = pageSize * (page - 1)
     }
 
+    if (sticky){ // только три для главной
+        query['fields.sticky'] = 1
+        query['limit'] = 3
+        query['skip'] = 0
+    }
+
     const blogPostsResult = await contentful.getEntries<BlogPostSkeleton>(query)
 
     const data = blogPostsResult.items.map((blogPostEntry) => parseContentfulBlogPost(blogPostEntry) as BlogPost)

src/types/blogPost.ts

@@ -9,6 +9,7 @@ export interface BlogPostFields {
     title?: EntryFieldTypes.Symbol
     slug: EntryFieldTypes.Symbol
     excerpt: EntryFieldTypes.Symbol
+    metaDescription: EntryFieldTypes.Symbol
     listImage?: EntryFieldTypes.AssetLink
     author?: AuthorSkeleton
     category: BlogPostCategorySkeleton
@@ -28,6 +29,7 @@ export interface BlogPost {
     author: Author | null
     category: string
     createdAt: string
+    metaDescription: string
     body: Array<WidgetMedia | WidgetParagraph>
 }