Learning Next.js: Part 3: Links and Head

On By Dan CoxIn code, JavaScript, React

Learning Next.js

Next.js is a JavaScript framework based on React for rapidly developing web sites and applications.

Links

In the previous section, the Pages functionality of Next.js was introduced. Any named file in the “/pages” folder will be interpreted as a separate file. However, what was not discussed was how to navigate between them.

To help with creating links, Next.js provides a class component called <Link>.

import Link from "next/link";

export default () => {
  return(
    <div>
    
      <p>This is the index page!</p>

      <Link href="/about">
        <a>About</a>
      </Link>

    </div>
  );
}

The <Link> component has one necessary attribute, href. In order to know the navigational location, this must be set. Within the <Link> component, a child element, <a>, should be used with the name of the link itself.

Head

Because Next.js handles the built-in React rendering, accessing the normal <head> element in HTML is not possible. However, it provides a component, <Head>, that can contain child elements like <title> and others that will be added during runtime.

Because Next.js provides this component, it can also be included anywhere within the existing component elements in a render() function. Its children will always be added or re-calculated during a call to render().

import Link from "next/link";
import Head from "next/head";

export default () => {
  return(
    <div>

      <Head>
        <title>Index page!</title>
        <meta name="author" content="Dan Cox" />
      </Head>

      <p>This is the index page!</p>

      <Link href="/about">
        <a>About</a>
      </Link>

    </div>
  );
}

Play with the Repl.it Example!