Extras

Setup

  • Add your own logo in the /app folder and name it icon.png.

    Not using .png extension? Update components that use icon.png like the Header.

  • Create your site favicon with this free Favicon Generator. Download the zip file and put these 2 files in the /app folder:
    • apple-touch-icon.png (rename it apple-icon.png)
    • favicon.ico
    Next.js will automatically reference them in the <head /> of your HTML page. Read more about metadata file convention.
  • Create a rectangle logo with your name like the one below. Name it logoAndName.pngand add it to the /public folder. Next-Auth will automatically add it to your login pages (see /libs/next-auth.js file).
  • Create two 1200x660 images for social media sharing. Name the first opengraph-image.png and the second twitter-image.png and add them to the /app folder.

NextJS will automatically reference them in the <head/> of your HTML page. Read more about metadata file convention.

Useful ressources

  1. If you need SVG illustrations, you can use Undraw
  2. If you need SVG background patterns, you can use Hero Patterns
  3. If you need icons, you can use Heroicons & Lucide
  4. If you need SVG blobs, you can use Haikei
  5. If you need Tailwind Snippets , you can use Snippets
  6. If you need Notion-like icons, you can use Overflow
  7. If you need cute SVG doodles, you can use Figma Doodles