Next.js-இல் நிலையான சொத்துக்களை எவ்வாறு வழங்குவீர்கள்?

Question

Accepted Answer

Next.js நிலையான கோப்புகளை (படங்கள், எழுத்துருகள், ஐகான்கள், PDF கள், `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 ``` `public/logo.png` இல் உள்ள கோப்பு `/logo.png` URL-ல் கிடைக்கிறது — `public/` பகுதி கைவிடப்படுகிறது. மூலத்திலிருந்து ஒரு முழுமையான பாதையுடன் அவற்றைக் குறிப்பிடவும்: ```tsx import Image from "next/image"; export default function Header() { return ( <>

Download guide ); } ``` ## public/ vs சொத்துக்களை இறக்குமதி செய்தல் ```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 ``` **இறக்குமதி செய்யப்பட்ட** படங்கள் ஒரு உள்ளடக்க-ஹேஷ் செய்யப்பட்ட கோப்பு பெயரைப் பெறுகின்றன (சிறந்த நீண்ட கால கேশிங்) மற்றும் அடுத்த நிலை அவற்றின் பரிமாணங்களைக் கணிக்க முடியும். `public/` பதிவாக பயன்படுத்தவும் (favicon, robots.txt, og-படங்கள், பதிவிறக்குதல்களை குறிப்பிடவும்) மற்றும் **இறக்குமதி** சமயோசிதமாக உপাদানங்களில் பயன்படுத்தப்படும் படங்களுக்கு. ## எச்சரிக்கை - **கட்ட நேரத்தில்** முன்மொழிந়த கோப்புகள் மட்டுமே வழங்கப்படுகின்றன — `public/` ஒரு வேளை பதிவேற்றம் கோப்பிடல் அல்ல. - அங்கு இரகசியங்கள் வைக்க வேண்டாம் — `public/` இல் உள்ள அனைத்தும் URL மூலம் பொதுவாக அணுகக்கூடியதாகும். ## ஏன் இது முக்கியம் `public/` பணிமடல் Next.js-இல் நிலையான கோப்புகளை (favicons, robots.txt, OG-படங்கள், பதிவிறக்கங்கள்) வழங்குவதற்கான எளிய, மரபிலான வழிமுறையாகும். துcode சொত்துக்கள் நியமப்பட்ட URL-ல் கள் பத்திரமாக உள்ளதாகவும் — மேலும் ஒரு சொத்தை (ஹேஷ் செய்யப்பட்ட, கேசபிள், தன்னாய়ான-பரிமாணங்கள்) அடுக்குமதி செய்வது `public/` இலிருந்து குறிப்பிடுவதை விட எப்போது சிறந்தது என்பதை அறிந়தல் — அன்றாட நிலையான சொத்துக்களின் தேவைகளை வெளிப்படுத்துகின்றன.