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:
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:
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:
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:
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:
npm start
Open http://localhost:3000 in your browser to see your app running.
Directory Structure
Build the App for Production
Last modified 4yr ago