Search code examples
javascripthtmlnetlify

Multiple pages on a Netlify github-deployed website?

I recently deployed a website from Netlify using a demo GitHub repo that I copied. Although it seems pretty straightforward at first, I know too little about JS, HTML and CSS to continue. I'm only looking to host three pages that contain only text and hyperlinks, but I cannot for the life of me figure out how to implement more than one page with this particular code base I started with. Here's the index.js script:

import Head from 'next/head'
import Header from '@components/Header'
import Footer from '@components/Footer'

export default function Home() {
  return (
    <div className="container">
    <div className="container-1">
    
      
      <Head>
        <title>Cool Page Title</title>
        <link rel="icon" href="/coolicon.ico" />
      </Head>

    
      <div className="box-1">
        <h3>Links</h3>
        <p>
          Current page <br /> 
          Page 2 <br /> 
          Another Page
        </p>
      </div>
    
    
      <div className="box-2">
        <h3>My cool page</h3>
        <p>
          Site under construction. <br />
          For all inquiries, please call 555-5555
        </p>
      </div>
   
    </div>
    
    <div className="container-2">
      <Footer />
    </div>
    </div>
  )
}

The syntax is the really tricky part for me. The Home() function seems to return the html for the home page, so then how would I implement a second page and have the links change them out? Would a switch/case statement work here?

Solution

  • Okay, so I figured out what I didn't previously understand. Turns out I was (unknowingly) using Next.JS. To handle multiple pages, I just created separate files, identical to the index.js file, but with a different file and function name, and then linked to them using:

    <Link href="/">Home</Link> <br /> 
<Link href="/newpage">New Page</Link> <br />

    Where the first link directs you to the index page and the second takes you to the page titled "newpage." Guess it really was that simple.

    Oh, and I also had to include this import statement at the beginning of each file that used links:

    import Link from 'next/link';