Recall & Review
beginner
What is the purpose of the
public directory in a Next.js project?The
public directory holds static files like images, icons, and other assets that can be accessed directly by the browser via a URL path starting with /. It is used to serve files without processing by Next.js.Click to reveal answer
beginner
How do you reference an image stored in the
public directory inside a Next.js component?You reference it by using the root-relative path starting with
/. For example, if the image is at public/logo.png, use <img src="/logo.png" alt="Logo" />.Click to reveal answer
intermediate
Can files inside the
public directory be processed by Next.js (like transpiled or bundled)?No, files in the
public directory are served as-is without any processing or bundling by Next.js. They are static assets accessible directly by URL.Click to reveal answer
intermediate
Why should you use the
public directory for static assets instead of importing them in Next.js components?Using the
public directory is best for assets that do not need to be bundled or optimized by Next.js, such as favicon, robots.txt, or large media files. Importing assets triggers bundling and optimization, which is better for smaller or dynamic assets.Click to reveal answer
beginner
What URL path would you use to access a file named
robots.txt placed inside the public directory?You would access it directly at
/robots.txt in the browser, because files in public map to the root URL path.Click to reveal answer
Where should you place a static image file to serve it directly in Next.js?
✗ Incorrect
Static files like images should be placed in the
public directory to be served directly.How do you reference a file named
banner.jpg stored in public/images inside an <img> tag?✗ Incorrect
Files in
public are referenced with root-relative paths starting with /.Which statement is true about files in the
public directory?✗ Incorrect
Files in
public are served as static files without any processing.If you want to serve a
favicon.ico file, where should you place it in a Next.js project?✗ Incorrect
Favicons should be placed in the
public directory to be served directly.What URL path accesses
public/robots.txt in a Next.js app?✗ Incorrect
Files in
public are accessible from the root URL path.Explain how the
public directory works in Next.js and how you use it to serve static files.Think about how you would show an image or favicon without bundling.
You got /4 concepts.
Describe when and why you would choose to put files in the
public directory instead of importing them in Next.js.Consider file size and processing needs.
You got /4 concepts.