Static Assets — Complete Guide
Static Assets — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of Next.js Tutorial on Toolliyo Academy.
On this page
Next.js Tutorial (LearnHub) · Lesson 13 of 100
Static Assets
Beginner → Intermediate → Advanced → Professional
Beginner · 1 — Foundations · ~12 min read · Module 2: Layouts & Styling
Introduction
This lesson is part of the beginner section. We explain Static Assets slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. Files in public/ are served at the root URL. /logo.svg maps to public/logo.svg. Use for favicons, robots.txt, and PDFs that do not need processing. LearnHub needs a logo, course placeholder images, and downloadable syllabi. public/ is the simple static file bucket.
Static Assets appears in almost every LearnHub page you will build. Once it clicks, data fetching and auth become much easier.
When will you use this?
You use layouts and styling in every page you build from your first screen to production.
- Course catalogs, lesson sidebars, and instructor dashboards all use layouts and shared navigation.
- When a student opens a lesson page, nested layouts keep the header and progress bar consistent.
Real-world: Zoho-style SaaS dashboard
The B2B SaaS team building Zoho-style SaaS dashboard uses Static Assets to serve logos, icons, and PDF syllabi from the public folder. tenant admins never see the TypeScript files — they just get a fast, reliable billing, team settings, and analytics widgets.
Production-style code
// public/logo.svg → open /logo.svg
// app/layout.tsx
import Image from 'next/image';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<img src="/logo.svg" alt="LearnHub" width={120} height={32} />
{children}
</body>
</html>
);
}What happens in production: In Zoho-style SaaS dashboard, getting Static Assets right means tenant admins trust the billing, team settings, and analytics widgets every day.
Lesson example (start here)
Copy this smaller example first. Once it works, compare it with the real-world code above.
// public/logo.svg → open /logo.svg
// app/layout.tsx
import Image from 'next/image';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<img src="/logo.svg" alt="LearnHub" width={120} height={32} />
{children}
</body>
</html>
);
}Line-by-line walkthrough
| Code | What it means |
|---|---|
// public/logo.svg → open /logo.svg | Comment — notes for humans; the compiler ignores it. |
// app/layout.tsx | Comment — notes for humans; the compiler ignores it. |
import Image from 'next/image'; | Imports Image — optimized images with lazy loading and responsive sizes. |
export default function RootLayout({ children }: { children: React.ReactNode }) { | Default export — the main page or component this file provides to Next.js. |
return ( | Returns JSX — what the user sees in the browser. |
<html lang="en"> | Part of the Static Assets example — read it together with the lines before and after. |
<body> | Part of the Static Assets example — read it together with the lines before and after. |
<img src="/logo.svg" alt="LearnHub" width={120} height={32} /> | Part of the Static Assets example — read it together with the lines before and after. |
{children} | Part of the Static Assets example — read it together with the lines before and after. |
</body> | Part of the Static Assets example — read it together with the lines before and after. |
</html> | Part of the Static Assets example — read it together with the lines before and after. |
); | Part of the Static Assets example — read it together with the lines before and after. |
} | Closes a block started by { above. |
How it works (big picture)
- Never import public files with relative paths from components — use URL path starting with /.
- For optimized images prefer next/image with files in public or remote domains.
Do this on your computer
- Add logo.svg to public/
- Reference /logo.svg in layout header
- Add public/robots.txt with User-agent: *
- Open /robots.txt in browser to verify
- Read the real-world section and name which part of LearnHub uses this topic.
- Run the example locally with npm run dev and confirm the same behavior.
- Change one value in the example (route, text, or course id) and predict what will happen before you save.
Experiments — try changing this
- Change a string or route in the example and save — watch the browser update.
- Break the code on purpose (remove a bracket), read the error overlay, then fix it.
Remember
public/ → /url path. Good for favicon, robots, static PDFs. Use next/image for photos when possible.
Common questions
public vs src/assets?
Next.js convention is public/ at project root for static URLs.
How long should I spend on Static Assets?
Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new concept; setup lessons may take one afternoon.
What if I get stuck on Static Assets?
Re-read the line-by-line walkthrough, check the terminal and browser overlay for errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.
Where is Static Assets used in real jobs?
See the real-world section above — the same pattern appears in LMS, e-commerce, SaaS, and dashboards. Interviewers ask you to explain it using one concrete example.