diff --git a/README.md b/README.md index aba4557..05b9151 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_1107 TILs and counting..._ +_1108 TILs and counting..._ --- @@ -490,6 +490,7 @@ _1107 TILs and counting..._ - [Create Files And Directories For Dynamic Routes](nextjs/create-files-and-directories-for-dynamic-routes.md) - [Define URL Redirects In The Next Config](nextjs/define-url-redirects-in-the-next-config.md) - [Remove A Query Param From The URL](nextjs/remove-a-query-param-from-the-url.md) +- [Ship Public Assets With A Next.js App](nextjs/ship-public-assets-with-a-nextjs-app.md) ### Phoenix diff --git a/nextjs/ship-public-assets-with-a-nextjs-app.md b/nextjs/ship-public-assets-with-a-nextjs-app.md new file mode 100644 index 0000000..b0a29c4 --- /dev/null +++ b/nextjs/ship-public-assets-with-a-nextjs-app.md @@ -0,0 +1,33 @@ +# 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 = () => { +