Update Next.js version and remove GridList component

The Next.js version was updated in the 'pnpm-lock.yaml' file which resulted in changes to multiple dependencies. Also, the '_components/grid-list.tsx' file was deleted as it was deemed no longer necessary. Additional small changes were made to the blog page and 'marketing.json' file.

apps/web/app/(marketing)/_components/grid-list.tsx

@@ -1,7 +0,0 @@
-export function GridList({ children }: React.PropsWithChildren) {
-  return (
-    <div className="mb-16 grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3 lg:gap-x-12">
-      {children}
-    </div>
-  );
-}

apps/web/app/(marketing)/blog/page.tsx

@@ -1,11 +1,13 @@
 import { createCmsClient } from '@kit/cms';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
 
-import { GridList } from '~/(marketing)/_components/grid-list';
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
-import { PostPreview } from '~/(marketing)/blog/_components/post-preview';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import { PostPreview } from './_components/post-preview';
+
 export const generateMetadata = async () => {
   const { t } = await createI18nServerInstance();
 
@@ -23,7 +25,7 @@ async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
   const limit = 10;
   const offset = page * limit;
 
-  const { items: posts, total } = await cms.getContentItems({
+  const { items: posts } = await cms.getContentItems({
     collection: 'posts',
     limit,
     offset,
@@ -36,15 +38,32 @@ async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
         subtitle={t('marketing:blogSubtitle')}
       />
 
-      <div className={'container mx-auto'}>
-        <GridList>
-          {posts.map((post, idx) => {
-            return <PostPreview key={idx} post={post} />;
-          })}
-        </GridList>
-      </div>
+      <If
+        condition={posts.length > 0}
+        fallback={
+          <div className={'container mx-auto pb-12'}>
+            <Trans i18nKey="marketing:noPosts" />
+          </div>
+        }
+      >
+        <div className={'container mx-auto'}>
+          <PostsGridList>
+            {posts.map((post, idx) => {
+              return <PostPreview key={idx} post={post} />;
+            })}
+          </PostsGridList>
+        </div>
+      </If>
     </div>
   );
 }
 
 export default withI18n(BlogPage);
+
+function PostsGridList({ children }: React.PropsWithChildren) {
+  return (
+    <div className="grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3 lg:gap-x-12">
+      {children}
+    </div>
+  );
+}

apps/web/package.json

@@ -48,7 +48,7 @@
     "i18next": "^23.11.0",
     "i18next-resources-to-backend": "^1.2.0",
     "lucide-react": "^0.363.0",
-    "next": "14.2.0-canary.63",
+    "next": "14.2.0-canary.64",
     "next-sitemap": "^4.2.3",
     "next-themes": "0.3.0",
     "react": "18.2.0",

apps/web/public/locales/en/marketing.json

@@ -8,6 +8,7 @@
   "pricing": "Pricing",
   "pricingSubtitle": "Pricing plans and payment options",
   "backToBlog": "Back to blog",
+  "noPosts": "No posts found",
   "contactFaq": "If you have any questions, please contact us",
   "contact": "Contact",
   "about": "About",