Page Editor Interface
Creating and Editing Pages
When you create or edit a Next.js page, you're presented with a clean, intuitive editor interface.
Page Title
What it is: The main heading and identifier for your page.
Example: 'Landing Page', 'About Our Company', 'Pricing Plans'
Where it's used:
- Browser tab title (unless overridden by SEO settings)
- Default H1 heading on the page
- Admin list view
- Navigation menus (if added)
Best practices:
- Keep it concise but descriptive (2-6 words)
- Use title case (Capitalize Each Word)
- Make it match the page's purpose
- Avoid generic titles like 'Page 1' or 'Untitled'
Slug (URL)
What it is: The URL-friendly version of your page name that appears in the web address.
Example: If Page Title is 'Landing Page', slug is 'landing-page'
Final URL: https://yoursite.com/landing-page
Rules for slugs:
- Use lowercase letters only
- Replace spaces with hyphens (-)
- No special characters (!, @, #, $, %, etc.)
- No accented characters (use 'a' instead of 'á')
- Keep it readable and meaningful
Examples:
- ❌ 'Our Amazing Services !!!' → ✅ 'our-amazing-services'
- ❌ 'Acerca de Nosotros' → ✅ 'about-us'
- ❌ 'page_new_2024' → ✅ 'services-2024'
Content Editor
What is it: A rich text editor (similar to Microsoft Word) where you write and format your page content.
Available Formatting Tools
The toolbar provides various formatting options:
Normal dropdown: Choose text styles
- Normal - Regular paragraph text
- Heading 1 - Main page title (already used for page title, use sparingly)
- Heading 2 - Major section headings
- Heading 3 - Sub-section headings
- Heading 4-6 - Nested sub-headings
Text formatting buttons:
- B (Bold) - Emphasize important words
- I (Italic) - Subtle emphasis or foreign words
- U (Underline) - Use sparingly (can confuse with links)
- S (Strikethrough) - Show edits or removed text
- " " (Quote) - Block quotes for testimonials or citations
Lists:
- Bullet list - Unordered items (like this one)
- Numbered list - Sequential steps or rankings
- Indent/Outdent - Create nested lists
Alignment:
- Align left (default)
- Center (for headlines or images)
- Right (rarely used)
Advanced tools:
- 🔗 Link - Add clickable links to other pages or external sites
- 🖼️ Image - Insert photos or graphics
- {} Special characters - Insert symbols like ©, ®, ™
- </> Code - Insert HTML or code snippets
Content Writing Tips
- Start with an outline: Plan your H2 and H3 headings before writing
- Use short paragraphs: 2-4 sentences max for readability
- Break up text: Use headings, lists, and images every 150-200 words
- Write for scanning: Use bold for key terms, lists for quick reference
- Include calls-to-action: Tell readers what to do next