mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 15:18:01 +00:00
34 lines
893 B
Markdown
34 lines
893 B
Markdown
# Ship Public Assets With A Next.js App
|
|
|
|
A Next.js project includes a top-level `public` directory. Anything in this
|
|
directory at build time will be publicly available.
|
|
|
|
This is handy for things like a logo, cover image, or favicon.
|
|
|
|
If I create an `images` directory in `public` and then place an SVG in it:
|
|
|
|
```bash
|
|
$ ls public/images
|
|
logo.svg
|
|
```
|
|
|
|
Then I can reference that image in the HTML or JSX of my app pages, such as in
|
|
a `header.jsx` component.
|
|
|
|
```jsx
|
|
const Header = () => {
|
|
<div>
|
|
{/* a bunch of header and nav content */}
|
|
<img className="logo" src="/images/logo.svg" />
|
|
</div>
|
|
}
|
|
```
|
|
|
|
Notice it is publicly available at `/images/logo.svg`.
|
|
|
|
You can do this with other files as well. For instance, some kind of company
|
|
brochure PDF could be placed in `public` and you could link to it as a
|
|
download.
|
|
|
|
[source](https://nextjs.org/docs/basic-features/static-file-serving)
|