Complete the code to access a static image from the public directory in Next.js.
<img src="/[1]" alt="Logo" />
Files in the public folder are served from the root URL. So to access public/logo.png, use /logo.png in the src attribute.
Complete the code to link a CSS file located in the public directory inside the <head> of a Next.js page.
<head> <link rel="stylesheet" href="/[1]" /> </head>
Files in the public folder are accessed from the root URL. So public/styles.css is linked as /styles.css.
Fix the error in the code to correctly reference a JSON file in the public directory.
fetch('/[1]') .then(res => res.json()) .then(data => console.log(data))
When fetching files from the public folder, use the root-relative path without 'public/'. So data.json is accessed as /data.json in fetch.
Fill both blanks to create a link to a PDF file in the public directory and set it to open in a new tab.
<a href="/[1]" target="[2]" rel="noopener noreferrer">Download PDF</a>
The href should point to the file path inside public, here 'files/manual.pdf'. To open in a new tab, use target="_blank" and add rel="noopener noreferrer" for security.
Fill all three blanks to create an image tag that loads a picture from the public folder, sets alt text, and adds a CSS class.
<img src="/[1]" alt="[2]" className="[3]" />
The src should be the path inside public, here 'images/photo.jpg'. The alt attribute describes the image for accessibility. The className adds styling with the CSS class 'photo-style'.