בניית הפורטפוליו הזה: Next.js 16 App Router + Sanity + Clerk (SSG, i18n, SEO)

הפורטפוליו הזה נבנה בגישה של Static‑first ו‑SEO‑first, עם פיצ׳רים דינמיים רק איפה שבאמת צריך (צ׳אט AI וטופס יצירת קשר). המטרה: טעינה מהירה, רינדור צפוי ותוכן מנוהל מתוך Sanity.

מה אופטימיזציה כאן

- Next.js 16.1.3 App Router + React 19
- דפים סטטיים (SSG) לכל החלקים הציבוריים
- דו‑לשוניות: עברית ברירת מחדל בלי prefix, אנגלית תחת /en
- תוכן מנוהל דרך Sanity (skills/services/projects/FAQ/blog)
- Clerk לאימות רק עבור צ׳אט ה‑AI
- CI/CD + Preview Deploys על Vercel
- SEO מלא: metadata, OpenGraph/Twitter, JSON‑LD, sitemap, robots

דיאגרמת ארכיטקטורה

נקודות מפתח ביישום

1) App Router מאפשר Layout אחיד ו‑metadata לכל route.
2) next-intl מנהל את ה‑locale routing — עברית ברירת מחדל, אנגלית תחת /en.
3) Sanity הוא מקור האמת; אין “תוכן דמו” בקוד.
4) Clerk סוגר רק את צ׳אט ה‑AI, כולל לוקליזציה של UI.
5) ביצועים: chatkit/map/charts/animations נטענים רק כאשר צריך.

ארכיטקטורת הפורטפוליו – תקציר

הפורטפוליו הוא אפליקציית Next.js 16.1.3 מודרנית שמדגימה שילוב של App Router, i18n, Sanity CMS, Clerk, צ'אט AI ו-SEO ברמת production, עם פוקוס על יצירה סטטית, ביצועים גבוהים ותחזוקה קלה.

Tech Stack עיקרי

• Next.js 16.1.3 (App Router, React 19, Turbopack) – בסיס ה-frontend וה-routing.
• Sanity v5 + GROQ – CMS גמיש לניהול תוכן רב-לשוני.
• Clerk – אימות משתמשים לדשבורד בלבד.
• OpenAI ChatKit + MCP – צ'אט AI משולב בדשבורד.
• next-intl – i18n עם עברית כברירת מחדל ו-prefix ל-/en.
• Tailwind CSS + shadcn/ui – UI מודרני ומהיר לפיתוח.
• Resend – שליחת אימיילים מטופס יצירת קשר.
• PostHog + GA + GTM – אנליטיקות מלאות.
• Vercel + GitHub Actions – Deployment ו-CI/CD.

החלטות עיצוב מפתח

1. i18n – עברית כברירת מחדל ללא prefix

• defaultLocale = 'he' עם localePrefix: 'as-needed'.
• מסלולים:
• / – עברית (RTL) ללא prefix.
• /en – אנגלית (LTR) עם prefix.
• middleware.ts מגדיר זיהוי שפה וניתוב, תוך אי-הכללה של API ונתיבי מערכת.

לקח: שימוש ב-matcher מדויק מונע שבירת API routes ונתיבי Next פנימיים.

2. יצירה סטטית מלאה עם Sanity

• עמודי App Router מוגדרים כ-static:
• export const dynamic = 'force-static';
• export const revalidate = false;
• sanityFetchStatic בוחר בין no-store ב-development לבין force-cache + revalidate: 60 ב-production.

1import type { NextConfig } from 'next';
2import createNextIntlPlugin from 'next-intl/plugin';
3
4const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
5
6const nextConfig: NextConfig = {
7  output: 'standalone',
8  
9  experimental: {
10    turbo: {
11      rules: {
12        '*.svg': {
13          loaders: ['@svgr/webpack'],
14          as: '*.js',
15        },
16      },
17    },
18  },
19  
20  images: {
21    remotePatterns: [
22      {
23        protocol: 'https',
24        hostname: 'cdn.sanity.io',
25        pathname: '/images/**',
26      },
27    ],
28    formats: ['image/avif', 'image/webp'],
29  },
30};
31
32export default withNextIntl(nextConfig);

1import { sanityFetchStatic } from '@/sanity/lib/staticFetch';
2import { defineQuery } from 'next-sanity';
3
4// ✅ כפייה על יצירה סטטית
5export const dynamic = 'force-static';
6export const revalidate = false;
7
8const BLOG_POST_QUERY = defineQuery(`
9  *[_type == "blog" && slug.current == $slug][0]{
10    title,
11    content,
12    publishedAt
13  }
14`);
15
16// ✅ יצירת כל הנתיבים האפשריים בזמן בנייה
17export async function generateStaticParams() {
18  const posts = await sanityFetchStatic({
19    query: `*[_type == "blog"]{ "slug": slug.current, language }`,
20    tags: ['blog'],
21  });
22  
23  return posts.map((post: any) => ({
24    locale: post.language === 'he' ? 'he' : 'en',
25    slug: post.slug,
26  }));
27}