# Creating an App

To give you a better understanding on creating a React app in Soya Next, we will create a simple blog post app with the following pages:

* Home
* Posts
* About

One of the rules of good interface design is to strive for consistency. So, we will start by creating a layout component to have a consistent layout and also to reduce code duplication across all pages.

In your project root directory, add a new file at `components/Layout.js` with the following:

```javascript
import Link from 'next/link';
import { createPage } from 'soya-next';

export default createPage()(({ children }) => (
  <div>
    <ul>
      <li>
        <Link href="/"><a>Home</a></Link>
      </li>
      <li>
        <Link href="/about"><a>About</a></Link>
      </li>
    </ul>
    {children}
  </div>
));
```

Next, we will use this layout component to create the pages.

Before creating the pages, remember that the routing API is file-system based, which means every `.js` file within `pages` directory will become a route that gets automatically processed and rendered.

To create the home page, add a new file at `pages/index.js` with the following:

```javascript
import { createPage } from 'soya-next';
import Layout from '../components/Layout';

const PostLink = props => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
);

export default createPage()(() => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      <PostLink title="Hello Next.js" />
      <PostLink title="Learn Next.js is awesome" />
      <PostLink title="Deploy apps with Zeit" />
    </ul>
  </Layout>
));
```

Next, to create the about page, add another new file at `pages/about.js` with the following:

```javascript
import { createPage } from 'soya-next';
import Layout from '../components/Layout';

export default createPage()(() => (
  <Layout>
    <p>This is the about page</p>
  </Layout>
));
```

Finally, to create the posts page, add yet another new file at `pages/post.js` with the following:

```javascript
import { createPage } from 'soya-next';
import Layout from '../components/Layout';

export default createPage()(({ url }) => (
  <Layout>
    <h1>{url.query.title}</h1>
    <p>This is the blog post content.</p>
  </Layout>
));
```

Congratulations! You have finished creating the simple blog post app.

To start the app, run the following:

```bash
npm start
```

Open <http://localhost:3000> in your browser to see your app running.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://traveloka.gitbook.io/soya-next/getting-started/creating-an-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.