Add Ship Public Assets With A Next.js App as a next.js til

Author: jbranchaud

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
 

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 = () => {
+  <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)