Next.js ייצוא סטטי

פרסום
אתרי Next.js סטטיים

ייצאו את אפליקציית Next.js ל-HTML ונכסים סטטיים, העלו את תיקיית out ופרסמו אותה בלי להפעיל שרת Node.js.

עיון במדריך ההתקנה
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// Optional for static deployments
images: { unoptimized: true },
}

module.exports = nextConfig
ייצוא סטטי מופעל

מטריצת תמיכה לייצוא סטטי

לפני שמעלים את out, ודאו שהאפליקציה מתאימה למודל הייצוא הסטטי.

עובד היטב

  • routes סטטיים שנוצרים בזמן build
  • דפי App Router שניתנים לעיבוד סטטי
  • Pages Router עם getStaticProps / getStaticPaths
  • טעינת נתונים בצד הלקוח אחרי hydration
  • next/link, dynamic imports, CSS Modules ונכסים סטטיים

צריך runtime אחר

  • API routes ו-route handlers שצריכים שרת
  • middleware, rewrites, redirects ו-custom headers
  • getServerSideProps ורינדור בזמן בקשה
  • התחדשות סטטית מצטברת
  • ברירת המחדל של next/image בלי אסטרטגיה סטטית מותאמת

השתמשו ב-Next.js כשצריך את ה-framework, לא את השרת

שומרים את ה-framework, מוותרים על השרת

ייצוא סטטי של Next.js מאפשר לשמור על ניתוב מבוסס קבצים, מטא נתונים, רינדור בזמן build, תמיכה ב-CSS ו-React בצד הלקוח כשצריך.

הפלט עדיין מורכב מקבצים בלבד. לכן הוא מתאים לאתרי שיווק, תיעוד, תיקי עבודות, דפי מוצר, מרכזי תוכן ודפים אחרים שאפשר להכין בזמן build.

מהיר כמו נכס סטטי

אפשר לשמור HTML שעובד מראש במטמון ולהגיש אותו ישירות ממיקום קרוב, בלי להמתין לשרת רינדור.

פחות תקורה תפעולית

בלי runtime של Node יש פחות חלקים נעים, פלט פרסום פשוט יותר ופחות פערים בין builds.

מבהירים את גבול ה-runtime

אם דף צריך קוד שרת, לא כדאי לכפות עליו ייצוא סטטי. אם אפשר לבנות אותו מראש, תיקיית out היא פלט נקי לפרסום.

חוסמי יצוא סטטיים נפוצים

Blocker 01

בנייה נכשלת בגלל תכונות שרת בלבד

הסירו API שתלוי בבקשה מה-route המיוצא, העבירו אותו ל-backend נפרד, או פרסמו את החלק הזה בפלטפורמה עם runtime שרתי.

Blocker 02

תמונות עובדות ב-dev אך נכשלות לאחר הייצוא

ברירת המחדל של next/image מצפה לשרת. השתמשו ב-images.unoptimized, loader מותאם או נכסי תמונה סטטיים רגילים.

Blocker 03

routes דינמיים חסרים

צרו את רשימת ה-routes בזמן build עם generateStaticParams ב-App Router או getStaticPaths ב-Pages Router.

Blocker 04

redirects או rewrites לא חלים

redirects ו-rewrites של Next.js אינם חלק מייצוא סטטי. השתמשו במבנה דפים סטטי, בניווט בצד הלקוח או ב-redirects ברמת הפלטפורמה היכן שזמינים.

צ׳קליסט ייצוא סטטי ל-Next.js

01

מגדירים output: 'export'

הגדירו ל-Next.js להפיק HTML סטטי בזמן build במקום לצפות ל-next start או runtime של Node.

output: 'export'
02

בונים ומאמתים את out

הריצו build ואשרו שתיקיית out מכילה את הדפים המרונדרים, הנכסים, עמוד 404 וקבצים סטטיים שאתם מתכננים לפרסם.

npm run build
03

מעלים ובודקים routes

העלו את תיקיית out, ואז בדקו routes מקוננים, נכסים סטטיים ותמונות לא אופטימליות באתר שפורסם.

שאלות נפוצות על פרסום Next.js

מדוע רכיב Image של Next.js נכשל לאחר הייצוא?

ברירת המחדל של אופטימיזציית התמונות מצפה לשרת. לייצוא סטטי, הגדירו images.unoptimized ל-true ב-next.config.js.

האם API routes או getServerSideProps עובדים כאן?

לא. ייצוא סטטי מסיר תכונות runtime בצד השרת כמו API routes, middleware ו-getServerSideProps. העבירו את הלוגיקה הזו לשירות backend או serverless נפרד.

האם אפשר להשתמש ב-App Router?

כן, כל עוד אפשר לרנדר את ה-route באופן סטטי והוא לא תלוי ב-APIs דינמיים של שרת בלבד כמו headers או cookies.

כיצד עלי לטפל בתוכן דינמי?

אחזרו אותו בזמן build כשאפשר, או טענו אותו בצד הלקוח אחרי hydration. ייצוא סטטי עובד הכי טוב כשאפשר להכין את ה-HTML מראש.

האם להעלות את ‎.next או את out?

העלו את out שנוצר מ-`output: export`. תיקיית ‎.next היא תיקיית build פנימית של Next.js ואינה פלט הייצוא הסטטי שרוצים לפרסם.

האם זה תחליף לאחסון Vercel Next.js?

זה מתאים לייצוא סטטי, לא לכל אפליקציית Next.js. אם אתם מסתמכים על SSR, middleware, ISR, Server Actions או API routes, צריך runtime שתומך בתכונות האלה.