Learning Next.js Basics

Using Link and Images

<Link>

This is page 2, aptly named page2.js in our pages folder.

By importing Link from 'next/link' we can use the Link element with a href to create a means for the user to click between our pages.

In your code editor it will look something like this:

import Link from "next/link";
          
export default function YourPage(){
  return(
    <>
      <Link href="/fileName">Home Page</Link>
      //other content
    </>
  )
}

This was also done on the main/home page, and is accomplished by assigning the Link element the href of href="/" for the main/home page, and the file name for the href of other linked pages.

For example, links to this page (from within the site) would need href='/page2' assigned within the Link element.

It is important to note that, while the file name of your pages can be lowercase, the function name within the file that you use to return the page must be uppercase. For example, while the main/home page file name is index.js, the actual function name is Home. Similarly, while the file name for this page is page2.js, the function name is Page2.

This is a React.js rule and not only applicable to Next.js, but it felt worth mentioning as it will save you headaches in the future to remember to capitalize your function name.

<Image>

Ok, time to talk about Image.

It's extremely rare that a website is created these days with no images and having to deal with responsiveness and using the appropriate file type can be time consuming, as well as requiring extra lines of code. Luckily Next.js has <Image> built in to deal with that.

Lets say you have an amazing book that you've published and want show the full cover on your website...

To put an image on the page like above you would start by importing Image from "next/image". After you've done that you can use the Image element with the required props of src, width, height, and alt. There are other props that can be passed to <Image>, but only those four are required. You can find a more extensive list of the various props used in <Image> in the Next.js Docs on <Image>, but for the image above I only used those four and the style prop (to set the max-width to 100%).

With just those five props, and putting the <Image> in it's own div to center it on the screen (display: flex; and justify-content: center;), I was able to take a JPG file and create a fully responsive image on the webpage that will be loaded to the page as a more appropriate file type (webp in this case). All that with just this much code:

import Image from "next/image";

export default function YourPage(){
  return(
    <>
      <div className="image">
        <Image
          src={BookCover}
          width={320}
          height={231}
          style={{ maxWidth: "100%" }}
          alt="book cover of Origin Of The Average Man"
        />
      </div>
      //other content
    </>
  )
}

Thanks to Next.js <Image>, that is all the code you need to handle lazy loading, converting the file type, and responsiveness. Pretty great, right?

Next up: Sharing on every page (but only coding it once)