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, create a tsconfig.json
file in the root directory of your app with the following:
{
"compilerOptions": {
"baseUrl": "."
}
}
note
We're setting the baseUrl
to .
so we can import files relative to the root of our app. For example:
import 'styles/globals.css'
instead of import '../styles/globals.css'
Now, let's install TypeScript and our dependencies.
npm install --save-dev typescript @types/react @types/react-dom @types/node
Once the dependencies are installed, run:
npm run dev
This will automatically generate the rest of the settings needed for tsconfig.json
, and start the development server.
Congrats! You've setup TypeScript within your project. Let's now convert your existing JavaScript pages to TypeScript pages:
Rename pages/_app.js
to pages/_app.tsx
, and replace the contents with the following:
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!