
My blog were initially created with `Gastsby` and it has been easy to maintain and writing new blog posts from time to time.
Until recently where I am no longer able to publish new blog post unless I upgrade my project due to dependencies issues.
My choice was to migrate to `Next.js` because of my experience with other projects that I had set up, all using `Next.js`.
Below are some of the issues I faced and I decided to make a checklist out for it.

<hr />
<br />

#### Migration Checklist

1. Add `react`, `react-dom` and `next` packages

2. Add dev dependencies `autoprefixer` and `postcss`

3. Update scripts


```
  "dev": "next dev -p 8000",
  "build": "next build",
  "start": "next start",
```

4. Add `next.config.js` and `postcss.config.js`

5. Rename directory `/static` to `/public`

6. Move `/templates/*` to respective routes. Adapt to dynamic routes.

7. Remove `graphql` query in template files

8. Use `getStaticProps` to provide props previously provided by graphql.

9. Use `getStaticPaths` to generate predefined blog post routes.

10. Use `next/head` to replace `react-helmet` for header metadata.

11. Add `react-markdown`, `gray-matter` and `highlight.js` for markdown content.

12. For deployment, changes needed in `next.config.js`.

```
module.exports = {
  webpack: (config, { isServer }) => {
    config.module.rules.push(
      {
        test: /\.md$/,
        use: 'raw-loader'
      }
    )

    return config
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  trailingSlash: true,
}
```

`trailingSlash` is important for `Next.js` to redirect path without ending `/`. Otherwise, the page will be redirected to `/404`

`unoptimized` is set to `true` because the blog will be exported, and exported build will not enjoy the benefit of optimized image out of the box.


13. For deployment to Github pages, add `.nojekyll` to the `/out` directory after build. So that Github pages will recognize `_next` directory and the content inside.

```
  "deploy": "next build && next export && touch out/.nojekyll && gh-pages -t -d out"
```

The `-t` flag is important to push the changes on `.nojekyll`.

<br />

That's it!

Cheers.


next.js

Migrated my blog from Gatsby to Next.js