Static Assets

Next.js, görüntüler gibi statik dosyaları kök dizinde public adlı bir klasör altında sunabilir. Daha sonra public içindeki dosyalara temel URL'den (/) başlayarak kodunuz tarafından başvurulabilir.

Örneğin, public içine me.png eklerseniz, aşağıdaki kod görüntüye erişecektir:

Avatar.js 
import Image from 'next/image'
 
export function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

Caching

Next.js, public klasöründeki değişmez varlıklara otomatik olarak önbelleğe alma başlıkları ekler. Uygulanan varsayılan önbellekleme başlıkları şunlardır: 

Cache-Control: public, max-age=31536000, immutable

Robots, Favicons, and others

Bu klasör ayrıca robots.txt, favicon.ico, Google Site Doğrulama ve diğer statik dosyalar ( .html dahil) için de kullanışlıdır. Ancak, pages/ dizinindeki bir dosyayla aynı ada sahip statik bir dosyaya sahip olmadığınızdan emin olun, çünkü bu bir hataya neden olacaktır. Daha fazlasını okuyun.

Bilmekte fayda var:

  • Dizinin adı public olmalıdır. Bu ad değiştirilemez ve statik varlıkları sunmak için kullanılan tek dizindir.
  • Yalnızca derleme sırasında public dizininde bulunan varlıklar Next.js tarafından sunulacaktır. İstek zamanında eklenen dosyalar kullanılamayacaktır. Kalıcı dosya depolama için AWS S3 gibi bir üçüncü taraf hizmeti kullanmanızı öneririz.