Beginner5 min read
Was this chapter helpful?
Share
Your first site has one page. Real sites have many. Here's how to add them.
A page is what shows up at one URL. codebooks.ai is one page (the homepage). codebooks.ai/about is another page. codebooks.ai/quiz is another.
Each page is a separate file in your project. In Next.js, pages live inside the app/ folder. The folder name becomes the URL path.
Example structure
You don't create these folders by hand. AI does it when you ask for a new page.
Adding a page to an existing project is one prompt. Here's the formula:
ADD ONE NEW PAGE
"Add a new /about page to my site. Include a hero section that says "About [your name]", a short bio paragraph, and three sections about my background, skills, and projects. Match the design and styling of my homepage."
That's it. AI creates the folder, the page file, and writes the content. The new page is live in seconds.
You can add multiple pages in one prompt. This is faster than asking for them one by one — AI keeps the design consistent across all of them.
ADD MULTIPLE PAGES
"Add three new pages to my site: /about, /pricing, and /contact. Each one should match my homepage's design (same colors, fonts, header, footer). Create realistic placeholder content for each page so I can see what it looks like before I write the real copy."
Almost every site has these. If you're starting from scratch, add all four at once.
Home (/)
Your front door. Hero, value prop, CTA, social proof. The first thing visitors see.
About (/about)
Who you are, why you built this, the story behind the project. Builds trust.
Pricing (/pricing)
If you charge money. List your plans, highlight the recommended one, link to checkout.
Contact (/contact)
How to reach you. Email, contact form, social links, sometimes a calendar booking widget.
Once you have multiple pages, you need a way for users to move between them. That's called navigation.
The simplest navigation is a row of links at the top of every page. Each link points to a page on your site.
A real navigation bar
ADD A NAV BAR
"Add a navigation bar to the top of every page on my site. It should include my logo on the left and links to Home, About, Pricing, and Contact on the right. Make it sticky so it stays visible as I scroll. On mobile, collapse it into a hamburger menu."
Once you have a nav bar, you don't want to write it on every page. That would be tedious — and if you ever change it, you'd have to update every file.
The fix: a layout file. In Next.js, app/layout.tsx wraps every page on your site. You put your nav bar and footer in layout.tsx, and they automatically appear on every page.
Without a layout
You copy-paste the nav bar into every page file. When you want to change a link, you update 8 files. You forget one. Bug.
With a layout
You write the nav bar once in layout.tsx. Every page automatically wraps inside it. Change a link in one place, all pages update.
Good news: AI does this automatically when you ask for a navigation bar. You don't need to think about layout files unless you want to.
"404 Not Found" on a new page
Either the folder is named wrong (must be lowercase, no spaces) or the file inside isn't called page.tsx. Ask AI: "why does my /about page show 404?"
Header/footer disappears on one page
That page has its own layout.tsx that overrides the main one. Tell AI "remove the layout from /about so it uses the root layout."
Clicking a link reloads the whole page
AI used a regular <a> tag instead of the Next.js <Link> component. Say "replace all the <a> tags in my nav with Next.js Link components for instant navigation."
Adding too many pages too fast
Build the homepage first and make it look great. Then add pages one at a time. Don't scaffold 10 empty pages — you'll lose track of which ones need real content.
You have a beautiful homepage with a hero, features, and pricing — all on one long-scroll page. Now you want About, Pricing, Contact, and a Blog. Instead of cramming everything into one page, you split them out into separate URLs so each one can rank in Google and be shared on its own.
Build this with AI
"Right now my whole site lives on one page. Split it into proper pages: keep the hero and features on the homepage, move the pricing section to /pricing, the FAQ to /faq, and add new /about and /contact pages. Add a sticky nav bar with links to all of them and make it look the same on every page."
ADD A FOOTER TO EVERY PAGE
"Add a footer that appears on every page of my site. Include my logo, a short tagline, three columns of links (Product, Company, Legal), and social media icons. Make it match the design of my header."
HIGHLIGHT THE CURRENT PAGE IN THE NAV
"In my navigation bar, highlight the link for the page the user is currently on. Use a slightly different color or an underline so it's obvious which page they're viewing."
ADD BREADCRUMBS
"Add breadcrumbs to every page (except the homepage). They should show the path from home to the current page. For example: Home › Blog › My First Post. Use the Next.js Link component so they navigate instantly."
