Skip to main content

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.

Red arrow pointing to the create site button in Local

Follow the onboarding process to create a new WordPress site.

Created site settings in Local

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

WordPress site created using Local

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!