Problem Statement
How do you serve and reference static files like images, fonts, and documents in Next.js?
Explanation
Static files are placed in the public directory at the root of your project and can be referenced starting from the base URL using /filename.ext, so a file at public/logo.png is accessible at /logo.png in your code and in the browser.
Never name the public folder anything else as Next.js specifically looks for this directory, and all files inside are served statically without processing.
For images, use the Image component with src='/logo.png' to get automatic optimization, and for fonts or documents, reference them directly in Link components or import them in CSS files.
The public directory should not be nested and must be at the root level of your Next.js project.
