<aside> ⚠️ This note contains only the "difficult" parts when creating a Next.js website from Wordpress. You should read the official documetation and also things mentioned in this note (it's about Gatsby and WP).

</aside>

<aside> ☝ I prefer Next.js other than Gatsby when using with Wordpress because I want to use for free the "incremental building" functionality. As I know, if we want something like that with Gatsby, we have to use Gatsby Cloud (paid tiers).

</aside>

Getting started

👉 IMPORTANT: Use this official starter (it uses TypeScript, Tailwind CSS).

<aside> ⚠️

The following steps are heavily based on this starter, which means that some packages/settings have already been set up by this starter.

</aside>

Using Local for a local version of Wordpress (WP) site. Read more in this blog. From now, I use math2it.local for a local WP website in this note and math2it.com for its production version.

In WP, install and activate plugin WPGraphQL.

Copy .env.local.example to .env.local and change it content.

npm i
npm run dev

The site is running at http://localhost:3000.

Basic understanding: How it works?

How pages are created?

• pages/abc.tsx leads to locahost:3000/abc
• pages/xyz/abc.tsx leads to localhost:3000/xyz/abc
• pages/[slug].tsx leads to localhost:3000/<some-thing>. In this file,
  • We need getStaticPaths to generates all the post urls.
  • We need getStaticProps to generate the props for the page template. In this props, we get the data of the post which is going to be created! How? It gets the params.slug from the URL (which comes from the pattern pages/[slug].tsx). We use this params to get the post data. The [slug].tsx helps us catch the url's things. Read more about the routing.
  • Note that, all neccessary pages will be created before deploying (that why we call it static)

Vercel CLI

Build and run vercel environment locally before pushing to the remote.

👉 Vercel CLI – Vercel Docs

npm i -g vercel

Link to the current project