# Adding and Customizing Pages

Static pages are extremely useful to contextualize the data presented in your WebGeoDa dashboard. For example, you could include documentation on your data sources, potential limitations, citations, and a data download. Or add a form for users to report data issues and suggestions!

## Starting a New Page

At its core, here's all you need for a page:

```javascript
// pages/myPage.js
import Head from 'next/head'

export default function MyPage() {
    return (
        <div>
            <Head>
                <title>My Page:: WebGeoDa Scaffolding</title>
                <meta name="description" content="A Really Good Page." />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            Ahoy, Globe!
        </div>
    )
}
```

Each page script starts with any imports, here we're importing the `<Head>` component from `next/head`. Then, your main function for that page, denoted with `export default`. You can have any additional logic you need for the page in this function and any additional helper functions outside the function as well.

The `return` statement has the bulk of what we're looking for here. Instead of writing traditional HTML, [Next.js](https://docs.webgeoda.org/pages/adding-and-customizing-pages) and React use a mash of HTML and XML called [JSX](https://docs.webgeoda.org/pages/adding-and-customizing-pages). It can interpret traditional HTML elements, such as `div`, but also supports custom elements and components. In the example above the `<Head>` component we imported allows us to modify the meta information on the page, like the title, description, favicon, and so on. Past that head

## Updating the Nav Bar

Add or remove `<MenuLink>` elements in the navbar, found in `components/layout/MainNav.js`. Each of these represents a link in the navigation menu, and the `href` property leads to the page's route (eg. "/map"). Be sure to include `as='a'` in the `<MenuLink>` element for expected behavior:

```javascript
// components/layout/MainNav.js
    // other component stuff...
    <Menu>
        <MenuButton>
            Menu <span aria-hidden className={styles.hamburger}>☰</span>
        </MenuButton>
        <MenuList id="menu">
            <MenuLink as="a" href="/">
                Home
            </MenuLink>
            <MenuLink as="a" href="/map">
                Map
            </MenuLink>
            <MenuLink as="a" href="/about">
                About
            </MenuLink>
        </MenuList>
    </Menu>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webgeoda.org/pages/adding-and-customizing-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
