https://serverless-stack.com/ logo
Join Slack
Powered by
I expect this to be painfully obvious in hindsight...
# help
k
I expect this to be painfully obvious in hindsight... though for the life of me I cannot seem to get favicons loading with Netxt JS. I have tried several different approaches yet it is still returning a 404. What strikes me as odd is that I have the same setup used in the tailwind-next-starter-blog (https://github.com/timlrx/tailwind-nextjs-starter-blog). This isn't an SST-specific question on the surface, though given the comparable setup to the above I wonder if it is due to a settings file or config detail that I am overlooking. Here is the structure of 
public
(same level as 
pages
):
Copy code
public/
  - assets/
    - img/
      - img1.png
      - img2.png
    - styles/
  - static/
    - favicons/
      - android-chrome-192x192.png
      - android-chrome-512x512.png
      - apple-touch-icon.png
      - favicon-16x16.png
      - favicon-32x32.png
      - favicon.ico
      - site.webmanifest
And the relevant code
Copy code
// _app.js
// imports/return*
<Head>
  <meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>


// _document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  render() {
    return (
      <Html lang="en" className="scroll-smooth">
        <Head>
          <link
            rel="apple-touch-icon"
            sizes="76x76"
            href="/static/favicons/apple-touch-icon.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="/static/favicons/favicon-32x32.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="16x16"
            href="/static/favicons/favicon-16x16.png"
          />
          <link rel="manifest" href="/static/favicons/site.webmanifest" />
          <meta name="msapplication-TileColor" content="#000000" />
          <meta name="theme-color" content="#000000" />
        </Head>
          <Main />
          <NextScript />
      </Html>
    );
  }
}
export default MyDocument;


// index.js
<Head>
  <title>Site Name</title>
  <meta name="robots" content="follow, index" />
  <meta
    name="description"
    content="Site description"
  />
  <meta propetty="og:url" content="<https://websiet.com>" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Site Name" />
  <meta
    property="og:description"
    content="Site description"
  />
  <meta property="og:title" content="Site Name" />
</Head>
d
Just to be clear, the definition of 404 in this case is traveling to the url that the various icons should be at 
/static/favicons/favicon-32x32.png
results in the browser reporting a 404?
I don't see anything wrong with the code, and there are no such settings in SST or Next to disable the public folder.
d
Is this in an s3 bucket so the redirect is being called?
k
@Derek Kershner yup correct, adding a screenshot
@Devin they are all current in 
/public
, though I will probably try S3 at some point if I can't find a workaround
d
how are you starting your localhost? just 
next dev
?
If so, you are circumventing SST entirely, and this is purely a next.js issue.
k
I'm running 
npm run dev
, which maps to 
sst-env -- next dev
d
ive never experienced this one myself, public is pretty reliable (since it is so simple)
k
Yeah, I'm thinking this is more a Next problem, very odd
Worst case I'll deploy with the default grayscale globe and find a workaround
d
only thing I can think of is maybe the folder is in the wrong spot? You said next to 
pages
, but 
pages
has multiple possible locations, whereas public must be root, period.
or maybe a misspelling we arent seeing?
i agree its gotta be something simple, perhaps the next crowd will have experienced similar
d
i think your directory structure in 
/public
is not correct for nextjs favicons. take a look at this; https://coderrocketfuel.com/article/add-favicon-images-to-a-next-js-website my nextjs has favicons loading properly. the 
/public
dir contains, among others 
favicon-16x16.png
try moving all of your favicon icons into the root dir of 
/public
without 
/static/favicons
k
could be @Derek Kershner, I'll try my luck with the next crew if nothing surfaces in the next few tries
appreciate the link @David Martin, taking a look at this now
lol it was indeed simple! my 
public
folder was next to 
pages
but one level deeper than the project root (I have pages, components etc in 
frontend
). Also regenerated favicons per that post. Still not loading in the icon but found through 
localhost:3000/favicon.ico
thanks for nudging in the right direction both, hoping that's the last time I do that again 🤣
awesome it's visible in prod (closing the loop)
5 Views
Open in Slack
PreviousNext
Powered by