follow migration guide

* https://github.com/gatsbyjs/gatsby/blob/v2/docs/docs/migrating-from-v1-to-v2.md

gatsby-node.js

@@ -1,19 +1,7 @@
 const path = require('path')
 
-// Intersection Observer polyfill
-// requires `npm install intersection-observer`
-// https://github.com/gatsbyjs/gatsby/issues/2288#issuecomment-334467821
-exports.modifyWebpackConfig = ({ config, stage }) => {
-  if (stage === 'build-html') {
-    config.loader('null', {
-      test: /intersection-observer/,
-      loader: 'null-loader'
-    })
-  }
-}
-
-exports.createPages = ({ boundActionCreators, graphql }) => {
-  const { createPage } = boundActionCreators
+exports.createPages = ({ actions, graphql }) => {
+  const { createPage } = actions
 
   return new Promise((resolve, reject) => {
     const template = path.resolve('src/templates/Project.jsx')
@@ -32,7 +20,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
                 img {
                   id
                   childImageSharp {
-                    sizes(maxWidth: 500, quality: 80) {
+                    fluid(maxWidth: 500, quality: 80) {
                       aspectRatio
                       src
                       srcSet
@@ -51,7 +39,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
                 img {
                   id
                   childImageSharp {
-                    sizes(maxWidth: 500, quality: 80) {
+                    fluid(maxWidth: 500, quality: 80) {
                       aspectRatio
                       src
                       srcSet

package.json

@@ -21,8 +21,8 @@
   "dependencies": {
     "camel-case": "^3.0.0",
     "file-saver": "^1.3.8",
-    "gatsby": "^1.9.270",
-    "gatsby-image": "^1.0.52",
+    "gatsby": "next",
+    "gatsby-image": "next",
     "gatsby-link": "^1.6.44",
     "gatsby-plugin-favicon": "^2.1.1",
     "gatsby-plugin-matomo": "^0.4.0",
@@ -30,7 +30,7 @@
     "gatsby-plugin-react-helmet": "^2.0.11",
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-plugin-sass": "^1.0.26",
-    "gatsby-plugin-sharp": "^1.6.47",
+    "gatsby-plugin-sharp": "next",
     "gatsby-plugin-sitemap": "^1.2.25",
     "gatsby-plugin-svgr": "^1.0.1",
     "gatsby-source-filesystem": "^1.5.38",
@@ -39,6 +39,8 @@
     "giphy-js-sdk-core": "^1.0.3",
     "intersection-observer": "^0.5.0",
     "js-yaml": "^3.12.0",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
     "react-helmet": "^5.2.0",
     "react-markdown": "^3.3.2",
     "react-transition-group": "^2.3.1",
@@ -55,7 +57,7 @@
     "gatsby-transformer-json": "^1.0.19",
     "ora": "^2.1.0",
     "prepend": "^1.0.2",
-    "prettier": "^1.13.4",
+    "prettier": "^1.13.5",
     "prettier-stylelint": "^0.4.2",
     "slugify": "^1.3.0",
     "stylelint": "^9.2.1",

src/components/Layout.jsx

@@ -0,0 +1,124 @@
+import React, { Component, Fragment } from 'react'
+import PropTypes from 'prop-types'
+import withRouter from 'react-router-dom/withRouter'
+import TransitionGroup from 'react-transition-group/TransitionGroup'
+import Head from './atoms/Head'
+import Header from './organisms/Header'
+import Footer from './organisms/Footer'
+import { FadeIn } from './atoms/Animations'
+import './Layout.scss'
+
+class TransitionHandler extends Component {
+  shouldComponentUpdate() {
+    return this.props.location.pathname === window.location.pathname
+  }
+
+  render() {
+    const { children } = this.props
+    return <div className="transition-container">{children}</div>
+  }
+}
+
+const Main = ({ children }) => <main className="screen">{children}</main>
+
+const TemplateWrapper = ({ children, location }) => {
+  const isHomepage = location.pathname === '/'
+
+  return (
+    <StaticQuery
+      query={graphql`
+        query LayoutQuery {
+          # the data/meta.yml file
+          dataYaml {
+            title
+            tagline
+            description
+            url
+            email
+            avatar {
+              childImageSharp {
+                original: resize {
+                  src
+                }
+                small: resize(width: 256) {
+                  src
+                }
+              }
+            }
+            img {
+              childImageSharp {
+                resize(width: 980) {
+                  src
+                }
+              }
+            }
+            social {
+              Email
+              Blog
+              Twitter
+              GitHub
+              Dribbble
+            }
+            availability {
+              status
+              available
+              unavailable
+            }
+            gpg
+            addressbook
+            typekitID
+          }
+
+          # the package.json file
+          portfolioJson {
+            name
+            homepage
+            repository
+            bugs
+          }
+        }
+      `}
+      render={data => {
+        const meta = data.dataYaml
+        const pkg = data.portfolioJson
+
+        return (
+          <Fragment>
+            <Head meta={meta} />
+            <Header meta={meta} isHomepage={isHomepage} />
+
+            <TransitionGroup component={Main} appear={true}>
+              <FadeIn
+                key={location.pathname}
+                timeout={{ enter: 200, exit: 150, appear: 200 }}
+              >
+                <TransitionHandler location={location}>
+                  {children}
+                </TransitionHandler>
+              </FadeIn>
+            </TransitionGroup>
+
+            <Footer meta={meta} pkg={pkg} />
+          </Fragment>
+        )
+      }}
+    />
+  )
+}
+
+TransitionHandler.propTypes = {
+  children: PropTypes.any,
+  location: PropTypes.object.isRequired
+}
+
+Main.propTypes = {
+  children: PropTypes.any
+}
+
+TemplateWrapper.propTypes = {
+  children: PropTypes.func,
+  data: PropTypes.object.isRequired,
+  location: PropTypes.object.isRequired
+}
+
+export default withRouter(TemplateWrapper)

src/components/atoms/ProjectImage.jsx

@@ -9,7 +9,7 @@ const ProjectImage = ({ sizes, alt }) => (
     className="project__image"
     outerWrapperClassName="project__image-wrap"
     backgroundColor="#6b7f88"
-    sizes={sizes}
+    fluid={sizes}
     alt={alt}
   />
 )
@@ -21,7 +21,7 @@ ProjectImage.propTypes = {
 
 export const projectImage = graphql`
   fragment ProjectImageSizes on ImageSharp {
-    sizes(maxWidth: 1200, quality: 85) {
+    fluid(maxWidth: 1200, quality: 85) {
       ...GatsbyImageSharpSizes_noBase64
     }
   }

src/components/molecules/ProjectNav.jsx

@@ -8,7 +8,7 @@ const ProjectLink = ({ node }) => (
   <Link className={styles.link} to={node.slug}>
     <Img
       className={styles.image}
-      sizes={node.img.childImageSharp.sizes}
+      fluid={node.img.childImageSharp.sizes}
       alt={node.title}
     />
     <h1 className={styles.title}>{node.title}</h1>

src/layouts/index.jsx

@@ -1,118 +0,0 @@
-import React, { Component, Fragment } from 'react'
-import PropTypes from 'prop-types'
-import withRouter from 'react-router-dom/withRouter'
-import TransitionGroup from 'react-transition-group/TransitionGroup'
-import Head from '../components/atoms/Head'
-import Header from '../components/organisms/Header'
-import Footer from '../components/organisms/Footer'
-import { FadeIn } from '../components/atoms/Animations'
-import './index.scss'
-
-class TransitionHandler extends Component {
-  shouldComponentUpdate() {
-    return this.props.location.pathname === window.location.pathname
-  }
-
-  render() {
-    const { children } = this.props
-    return <div className="transition-container">{children}</div>
-  }
-}
-
-const Main = ({ children }) => <main className="screen">{children}</main>
-
-const TemplateWrapper = ({ data, location, children }) => {
-  const meta = data.dataYaml
-  const pkg = data.portfolioJson
-  const isHomepage = location.pathname === '/'
-
-  return (
-    <Fragment>
-      <Head meta={meta} />
-      <Header meta={meta} isHomepage={isHomepage} />
-
-      <TransitionGroup component={Main} appear={true}>
-        <FadeIn
-          key={location.pathname}
-          timeout={{ enter: 200, exit: 150, appear: 200 }}
-        >
-          <TransitionHandler location={location}>
-            {children()}
-          </TransitionHandler>
-        </FadeIn>
-      </TransitionGroup>
-
-      <Footer meta={meta} pkg={pkg} />
-    </Fragment>
-  )
-}
-
-TransitionHandler.propTypes = {
-  children: PropTypes.any,
-  location: PropTypes.object.isRequired
-}
-
-Main.propTypes = {
-  children: PropTypes.any
-}
-
-TemplateWrapper.propTypes = {
-  children: PropTypes.func,
-  data: PropTypes.object.isRequired,
-  location: PropTypes.object.isRequired
-}
-
-export default withRouter(TemplateWrapper)
-
-export const query = graphql`
-  query metaQuery {
-    # the data/meta.yml file
-    dataYaml {
-      title
-      tagline
-      description
-      url
-      email
-      avatar {
-        childImageSharp {
-          original: resize {
-            src
-          }
-          small: resize(width: 256) {
-            src
-          }
-        }
-      }
-      img {
-        childImageSharp {
-          resize(width: 980) {
-            src
-          }
-        }
-      }
-      social {
-        Email
-        Blog
-        Twitter
-        GitHub
-        Dribbble
-      }
-      availability {
-        status
-        available
-        unavailable
-      }
-      gpg
-      addressbook
-      typekitID
-    }
-
-    # the package.json file
-    portfolioJson {
-      name
-      homepage
-      repository
-      bugs
-    }
-  }
-`

src/pages/404.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Link from 'gatsby-link'
 import giphyAPI from 'giphy-js-sdk-core'
+import Layout from '../components/Layout'
 import Content from '../components/atoms/Content'
 import './404.scss'
 
@@ -40,22 +41,24 @@ class NotFound extends Component {
 
   render() {
     return (
-      <Content className="content content--404">
-        <h1>Shenanigans, page not found.</h1>
-        <p>
-          You might want to check the url, or{' '}
-          <Link to={'/'}>go back to the homepage</Link>. Or just check out some
-          fail gifs, entirely your choice.
-        </p>
+      <Layout>
+        <Content className="content content--404">
+          <h1>Shenanigans, page not found.</h1>
+          <p>
+            You might want to check the url, or{' '}
+            <Link to={'/'}>go back to the homepage</Link>. Or just check out
+            some fail gifs, entirely your choice.
+          </p>
 
-        <video className="gif" src={this.state.gif} autoPlay loop />
+          <video className="gif" src={this.state.gif} autoPlay loop />
 
-        <div>
-          <a className="gif__action" href="#" onClick={this.handleClick}>
-            Show me another cat fail gif
-          </a>
-        </div>
-      </Content>
+          <div>
+            <a className="gif__action" href="#" onClick={this.handleClick}>
+              Show me another cat fail gif
+            </a>
+          </div>
+        </Content>
+      </Layout>
     )
   }
 }

src/pages/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
+import Layout from '../components/Layout'
 import ProjectImage from '../components/atoms/ProjectImage'
 import FullWidth from '../components/atoms/FullWidth'
 import styles from './index.module.scss'
@@ -9,20 +10,22 @@ const Home = ({ data }) => {
   const projects = data.allProjectsYaml.edges
 
   return (
-    <FullWidth className="projects">
-      {projects.map(({ node }) => {
-        const { slug, title, img } = node
+    <Layout>
+      <FullWidth className="projects">
+        {projects.map(({ node }) => {
+          const { slug, title, img } = node
 
-        return (
-          <article className={styles.project} key={slug}>
-            <Link to={slug}>
-              <h1 className={styles.title}>{title}</h1>
-              <ProjectImage sizes={img.childImageSharp.sizes} alt={title} />
-            </Link>
-          </article>
-        )
-      })}
-    </FullWidth>
+          return (
+            <article className={styles.project} key={slug}>
+              <Link to={slug}>
+                <h1 className={styles.title}>{title}</h1>
+                <ProjectImage fluid={img.childImageSharp.sizes} alt={title} />
+              </Link>
+            </article>
+          )
+        })}
+      </FullWidth>
+    </Layout>
   )
 }
 

src/templates/Project.jsx

@@ -1,7 +1,8 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import ReactMarkdown from 'react-markdown'
+import Layout from '../components/Layout'
 import Content from '../components/atoms/Content'
 import FullWidth from '../components/atoms/FullWidth'
 import ProjectImage from '../components/atoms/ProjectImage'
@@ -25,7 +26,7 @@ const ProjectMeta = props => {
 const ProjectImages = props => (
   <FullWidth>
     {props.projectImages.map(({ node }) => (
-      <ProjectImage key={node.id} sizes={node.sizes} alt={props.title} />
+      <ProjectImage key={node.id} fluid={node.sizes} alt={props.title} />
     ))}
   </FullWidth>
 )
@@ -49,7 +50,7 @@ class Project extends Component {
     const { title, links, techstack } = project
 
     return (
-      <Fragment>
+      <Layout>
         <Helmet title={title} />
 
         <SEO project={project} meta={meta} />
@@ -67,7 +68,7 @@ class Project extends Component {
         </article>
 
         <ProjectNav projects={projects} project={project} />
-      </Fragment>
+      </Layout>
     )
   }
 }
@@ -83,8 +84,7 @@ ProjectImages.propTypes = {
 }
 
 Project.propTypes = {
-  data: PropTypes.object.isRequired,
-  pathContext: PropTypes.object.isRequired
+  data: PropTypes.object.isRequired
 }
 
 export default Project