Gatsby and next.js

next.js

1. Pages in Next.js In Next.js, a page is a React Component exported from a file in the pages directory.

Pages are associated with a route based on their file name. For example, in development:

pages/index.js is associated with the / route. pages/posts/first-post.js is associated with the /posts/first-post route.

1. Link Component When linking between pages on websites, you use the HTML tag.

In Next.js, you can use the Link Component next/link to link between pages in your application. allows you to do client-side navigation and accepts props that give you better control over the navigation behavior.

Gatsby

1. Key Gatsby Concept: Adding a plugin to your site Here’s a more detailed breakdown of the steps to add a plugin to your site:

1) Install the plugin using npm. In your terminal, run the following command (swapping out plugin-name for the name of the plugin you want to use). This will add the plugin as a dependency in your package.json and package-lock.json files.

Copycopy code to clipboard npm install plugin-name Depending on what plugin you’re using, there might be more dependencies that you also need to install. Check the specific plugin’s README in the plugin library for more details.

2) Configure the plugin in your gatsby-config.js file. Your gatsby-config.js file contains information about your site, including configuration for plugins. You can add a plugin to the plugins array:

module.exports = {
  siteMetadata: {
    title: "My First Gatsby Site",
  },
  plugins: ["plugin-name"],
};

Some plugins require extra configuration options. In that case, you’ll add an object to the plugins array (instead of a string), as shown below. (Check the plugin README in the Gatsby Plugin Library for more details on what that options object should look like.)

module.exports = {
  siteMetadata: {
    title: "My First Gatsby Site",
  },
  plugins: [
    {
      resolve: "plugin-name",
      options: {
        // Check the plugin README for what options go in here
      }
    },
  ]
}

Note: After you make updates to your gatsby-config.js file, you’ll need to restart your gatsby develop process for your changes to be picked up.

3) Use the plugin features in your site. Now that you’ve set up the plugin, you can use it in your Gatsby site as needed.

The specifics of this step will be different based on what the plugin does. Sometimes, the plugin might have a component or function that you can import and use in your site. Other times, you might not need to do anything extra at all. Check the plugin’s README for more details.

1. Update the static image to use a photo from your local filesystem

You can also use the StaticImage component to render images from your local filesystem.

• Download a photo to your computer, and move it into your project folder. To keep things organized, put it in the src/images directory.
• Update the src prop in your home page to be a relative path to your file instead of a URL. (Make sure it matches the name of your image!) Don’t forget to update the alt prop to describe your image!

import * as React from 'react'
import Layout from '../components/layout'
import { StaticImage } from 'gatsby-plugin-image'

const IndexPage = () => {
  return (
    <Layout pageTitle="Home Page">
      <p>I'm making this by following the Gatsby Tutorial.</p>
      <StaticImage
        alt="Clifford, a reddish-brown pitbull, dozing in a bean bag chair"
        src="../images/clifford.jpg"
      />
    </Layout>
  )
}

export const Head = () => <title>Home Page</title>

export default IndexPage

• In your web browser, go to localhost:8000. Your image should still appear on the home page.