Create A Basic Headless WordPress Site

In the previous tutorial, we set up our development environment to create JavaScript/TypeScript apps efficiently.

Now, we will create our frontend web app using Next.js, and spin up an instance of WordPress.

Create a Next.js App

Next.js offers a handy CLI tool called create-next-app to help us create a basic Next.js app.

To get started, run the following command:

npx create-next-app my-app

If prompted to create-next-app, enter `y' to continue.

Great! You've deployed your app! However, it's not quite ready for TypeScript yet. Let's do that now.

Setup TypeScript

Start by `cd'ing into your app directory:

cd my-app

Now, run:

touch tsconfig.json

This command creates your TypeScript config file.

Now, let's install TypeScript and our dependencies.

npm install --save-dev typescript @types/react

Once the dependencies are installed, run npm run dev to start the development server. Doing this will automatically generate the settings needed for tsconfig.json.

Now, convert your existing pages to TypeScript:

Rename pages/_app.js to pages/_app.tsx, and replace the contents with the following:

_app.tsx

import '../styles/globals.css';

import type { AppProps /*, AppContext */ } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

Additionally, rename, pages/index.js to pages/index.tsx.

Your Next.js site is now ready for TypeScript! Let's move on to WordPress.

Create a WordPress Site

Now that we have created a Next.js app, we can create a WordPress site. We use Local to spin up instances of WordPress locally.

Download and install Local from https://localwp.com. Once installed, click the + button in the bottom left corner of the screen.

Follow the onboarding process to create a new WordPress site.

You can then copy the "Site Domain" and visit your new WordPress site directly.

Key Takeaways

• We used create-next-app to create a Next.js app
• We installed and setup TypeScript on a basic Next.js app
• We created a WordPress site using Local

What's Next?

In the next tutorial, we'll create our first React component!