Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grammar edits to basic headless site #629

Merged
merged 1 commit into from
Nov 5, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions docs/tutorial/basic-headless-site.mdx
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
---
slug: /tutorial/basic-headless-site
title: Create A Basic Headless WordPress Site
description: In this tutorial, we'll walk you through the process of creating a basic headless WordPress site using Next.js and Local
description: In this tutorial, we'll walk you through the process of creating a basic headless WordPress site using Next.js and Local.
---

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

Now, we are going to create our frontend web app using Next.js, and spin up an instance of WordPress.
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` that will help us create a basic 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:

```bash
"`bash
npx create-next-app my-app
```

You may be asked to install `create-next-app` if you haven't already. If you are prompted, enter `y` to continue.
If prompted to `create-next-app`, enter `y' to continue.

Great! Your app has been created. However, it's not quite ready for TypeScript yet. Let's do that now.
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:
Start by `cd'ing into your app directory:

```bash
"`bash
cd my-app
```

Now, run:

```bash
"`bash
touch tsconfig.json
```

This will create your [TypeScript config file.](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
This command creates your [TypeScript config file.](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)

Now, let's install TypeScript and our dependencies.

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

Once the dependencies are installed, you can run `npm run dev` to start the development server. Doing this will automatically generate the settings needed for `tsconfig.json`.
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:

Expand All @@ -70,7 +70,7 @@ Your Next.js site is now ready for TypeScript! Let's move on to WordPress.

Now that we have created a Next.js app, we can create a WordPress site. We use [Local](https://localwp.com) to spin up instances of WordPress locally.

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

<img
src="/docs/img/localwp-create-site.png"
Expand Down