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:

// 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 and React use a mash of HTML and XML called JSX. 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

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:

// 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>

PreviousVariable Specification NextStyling and CSS Modules

Last updated 3 years ago