તમે Next.js માં સ્ટેટિક એસેટ્સ કેવી રીતે પૂરા પાડો છો?

Question

Accepted Answer

Next.js સ્ટેટિક ફાઇલો (ઈમેજ, ફોન્ટ્સ, આયકનો, PDFs, robots.txt) તમારા પ્રોજેક્ટના મૂળ પર વિશેષ public/ ફોલ્ડરમાંથી પૂરા પાડે છે.

public ફોલ્ડર URL રૂટ સાથે મેપ થાય છે

text

public/
  logo.png          → served at  /logo.png
  favicon.ico       → served at  /favicon.ico
  docs/guide.pdf    → served at  /docs/guide.pdf
  robots.txt        → served at  /robots.txt

પર એક ફાઇલ URL પર ઉપલબ્ધ છે — ભાગ છોડી દેવામાં આવ્યો છે. તેમને રૂટ્થી પૂર્ણ પાથ સાથે સંદર્ભિત કરો:

Download guide ); } ``` ## public/ વર્સ એસેટ્સ આયાત કરવું ```tsx // Option A: from public/ — referenced by URL string

// Option B: imported — bundled, hashed for caching, dimensions inferred import logo from "./logo.png";

// width/height come from the import automatically ``` **આયાતી** ઈમેજો કન્ટેન્ટ-હેશ્ડ ફાઇલનામ મેળવે છે (મહાન લાંબા-ગાળાની કેશિંગ) અને Next તેમના પરિમાણો અનુમાન કરી શકે છે. `public/` નો ઉપયોગ સ્થિર URL (favicon, robots.txt, og-images, ડાઉનલોડ્સ) દ્વારા સંદર્ભિત ફાઇલો માટે કરો અને **આયાતો** કમ્પોનેન્ટમાં સીધા ઉપયોગમાં લેવાતી ઈમેજો માટે. ## સતર્કતાઓ - માત્ર ફાઇલો જે **બિલ્ડ સમયે** હાજર છે તે પૂરા પાડવામાં આવે છે — `public/` રનટાઇમ અપલોડ ગંતવ્ય નથી. - ત્યાં રહસ્યો મૂકશો નહીં — `public/` માં બધું કંઈ URL દ્વારા જાહેરમાં સુલભ છે. ## તે શા માટે મહત્વપૂર્ણ છે `public/` ફોલ્ડર Next.js માં સ્ટેટિક ફાઇલો પૂરા પાડવાનો સરળ, સંમેલન-આધારિત માર્ગ છે (favicons, robots.txt, OG images, ડાઉનલોડ્સ). જાણવું કે તેની સામગ્રી URL રૂટ સાથે કેવી રીતે મેપ થાય છે — અને એસેટ આયાત કરવાને પ્રાધાન્য આપવું (હેશ્ડ, કેશેબલ, સ્વયં-કદ) વર્સ તેને `public/` માંથી સંદર્ભિત કરવું — રોજિંદા સ્ટેટિક-એસેટ જરૂરિયાતો આવરી લે છે.