DEV Community: Gerald

Build a Fullstack App With Strapi and Next.js

Gerald — Sun, 14 Feb 2021 18:35:29 +0000

Let's build a fullstack blog using Strapi and Next.js.
This article is based on Digital Ocean's Tech Talk by Chris Sev.
To get the ball rolling, let's setup our Strapi backend by running the following command in the terminal

npx create-strapi-app blog-strapi --quickstart

This command creates a Strapi project named blog-strapi and automatically opens the admin panel in our default browser.
Let's go ahead and enter credentials and click LET'S START. We should see the Strapi dashboard as shown below

Let's create our collection. On the dashboard, click on CREATE YOUR YOUR FIRST CONTENT-TYPE. Let's have Post as display name and click Continue. Select Text as the collection type and name the field title and leave the Short text type selected. Click on Add another field and select Text collection type and name it slug. Let's add one more field by clicking Add another field, select Rich text and name it content and click finish and save. Our collection now looks as below

To create posts, go to the left panel under Collection types, click on Posts and hit the Add New Posts button. Let's add the title as My Wins This Week, slug as my-wins-this-week, content as Won the golf tournament and click save and publish. Head over to the browser at http://localhost:1337/posts. We should be getting a Forbidden error because the API is secured by default. To change that, let's get back to the Strapi dashboard and click on settings. Under USERS AND PERMISSIONS PLUGIN, click on Roles then public and select find, findone, create and click save. Let's get back to our browser and refresh http://localhost:1337/posts. We should see our post as shown below

Our post looks good so far but we have no idea who the author is. To be able to add an author, we need to add another field of type relation to the Post collection type. On the Strapi dashboard, click on Content-Type Builder, select Post, click on Add another field and select Relation. On the File dropdown select User(from-users-permiss...) and select a User has many Posts relation. Let's rename users_permissions_user field name to simply user and click finish and save.
Let's go ahead and create a user. Under collection types, select Users and click on Add New Users. Input user credentials and toggle Confirmed button to set it to ON. Under Posts(0), let's assign My Wins This Week post to this user(in my case daka) because why not? Click save and refresh the browser at http://localhost:1337/posts. You should see the user object included in our response as shown below

Go ahead and create a couple of more posts and assign them users so that we have enough data to work with on the frontend.

Let's create our Next.js frontend by running the following command in the terminal

npx create-next-app blog-next

The above command creates a new Next.js app. Once the setup is done, run the following commands

cd blog-next
npm run dev

This will start our Next.js app server and the app can be accessed at http://localhost:3000/.
Let's open up our app in a Text Editor(I'm using VS Code), go to index.js and replace everything in the return block with <div>We are here!</div> and save. Head over to the browser at http://localhost:3000 and we should see the output as shown below

Let's go above the Home component and get our API data using getStaticProps function as shown below.

export async function getStaticProps() {
  //get posts from API
  const res = await fetch('http://localhost:1337/posts');
  const posts = await res.json();

  return {
    props: { posts }
  };
}

Now, in our Home component we can receive the posts as props and loop over them as shown below

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      {/* Loop over posts and show them */}
      {posts &&
        posts.map(post => (
          <div key={post.id} className={styles.post}>
            <h1>{post.title}</h1>
            <p>{post.content}</p>
            <em>By {post.user.username}</em>
          </div>
        ))}
    </div>
  );
}

Let's also add a bit of styling. In the styles directory, go to Home.module.css and replace all that is in there with the CSS code below.

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  margin: 5%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.post {
  padding-bottom: 10%;
}

When we save this, we should see the posts as shown below(of course you could do better styling).

Now let's handle routing by creating a file called [slug].js in the pages directory. This is a way that Next.js dynamically generates a bunch of files. There are two main things we need to do in [slug].js:

Tell Next.js how many pages there are and
For each individual page; get the data for that page.

We can achieve these with the help of getStaticPaths and getStaticProps functions respectively as shown in the snippet below

//Tell Next.js how many pages there are
export async function getStaticPaths() {
  const res = await fetch('http://localhost:1337/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { slug: post.slug }
  }));

  return {
    paths,
    fallback: false
  };
}

//For each individual page; get the data for that page
export async function getStaticProps({ params }) {
  const { slug } = params;
  const res = await fetch(`http://localhost:1337/posts?slug=${slug}`);
  const data = await res.json();
  const post = data[0];
  return {
    props: { post }
  };
}

fallback in getStaticPaths is set to false because we have a small number of paths to pre-render - so they are all statically generated during build time. In getStaticProps, const post is assigned data[0] because the response we get is an array and we are only interested in the first element.

We can now add a Post component in [slug].js and pass the props as shown below

export default function Post({ post }) {
  return <div>{post.title}</div>;
}

Now when we route to http://localhost:3000/my-wins-this-week, we get a single post as shown below:

Awesome right?

So, to be able to generate our post files, we need to add the following script to our package.json

  "export": "next build && next export"

Let's stop the server and run it

npm run export

This generates HTML files from all the posts we have in Strapi.
These files are in the out folder and are minified and ready to be hosted on a static server.
Now we will add provision to navigate between the posts page and the single post page using the Next.js Link. Edit the return block of the Home component as shown below

<div className={styles.container}>
      {/* Loop over posts and show them */}
      {posts &&
        posts.map(post => (
          <Link href={`/${post.slug}`} key={post.id} className={styles.post}>
            <a>
              <h1>{post.title}</h1>
              <p>{post.content}</p>
              <em>By {post.user.username}</em>
            </a>
          </Link>
        ))}
    </div>

and the return block for the Post component in[slug].js as follows

    <div>
      <Link href="/">
        <a>Home</a>
      </Link>
      <h1>{post.title}</h1>
    </div>

Be sure to import Link from "next/link" in both cases.
Now, when we start the server, we should be able to navigate through our site.

The last thing we want to do is creating a post. For that we need an API exploration tool, in my case I'm using Postman. Let's create a POST request with the following body:

{
    "title": "The New Normal",
    "slug": "the-new-normal",
    "content": "The new normal is here",
    "user": {
        "id": 1
    }
}

When we hit send, below is the post response we are getting

When we head over to our Strapi dashboard, we can see our new post added to the list of posts and when we click on it, we see the information passed as shown below.

That's it, our basic fullstack app is done.

Happy coding!

How To Use Redux with Hooks in a React-TypeScript Project

Gerald — Fri, 18 Sep 2020 11:57:46 +0000

Introduction

Redux is a predictable state container for JavaScript applications. In this tutorial, I will show you how to use redux to manage state in React with TyepeScript and Hooks.

Getting Started

If you are only interested in viewing complete code on GitHub, click here. Otherwise, let's setup the project using Create React App. In this tutorial I will be using yarn but you should be fine with npm as well. In your terminal run the following command

npx create-react-app posts --typescript

This command creates a React Typescript project called posts. To start the development server and view the project in your browser, run the following commands.

cd posts
yarn start

Installations

To use redux:

yarn add @reduxjs/toolkit

To use Redux with React and TypeScript:

yarn add react-redux
yarn add @types/react-redux

To add redux thunk:

yarn add redux-thunk

To add redux devtools:

yarn add redux-devtools-extension

Redux

Setup your redux folder as follows

src
-redux
--actions
--effects
--interfaces
--reducers
--store
--types

The interfaces folder is used for adding all interfaces that can be used across the project. For this tutorial, we will use posts fake data from JSONPlaceholder. In interfaces directory, create a file called Post.ts and add the following code.

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

The interface above defines a single post.

Now we need to setup our types. In the types folder, create a file called PostTypes.ts and add the following code

import { Post } from '../interfaces/Post';

export const GET_POSTS = 'GET_POSTS';

export interface GetPostsStateType {
  posts: Post[];
}

interface GetPostsActionType {
  type: typeof GET_POSTS;
  payload: Post[];
}
export type PostActionTypes = GetPostsActionType;

GetPostsStateType interface is defining what the state will look like; an array of posts. GetPostsActionType interface is defining the action type that you will see later in this tutorial.

In the reducers directory, create a file called PostReducer.ts and add the following code

import {
  GET_POSTS,
  GetPostsStateType,
  PostActionTypes
} from '../types/PostTypes';

const initialStateGetPosts: GetPostsStateType = {
  posts: []
};

export const getPostsReducer = (
  state = initialStateGetPosts,
  action: PostActionTypes
): GetPostsStateType => {
  switch (action.type) {
    case GET_POSTS:
      return {
        ...state,
        posts: action.payload
      };
    default:
      return state;
  }
};

In here, we initialize state of type GetPostsStateType that we defined earlier. We then create a reducer function called getPostsReducer. A reducer takes two parameters; state and action. In our case, state and action are of types initialStateGetPosts and PostActionTypes respectively while the reducer function returns GetPostsStateType. In the switch block, if the case is GET_POSTS, we return whatever is there in the state and update it with the new payload and the default case is state. Note that in a bigger project there would be a lot of cases.

Create another file in the reducers folder and lets call it index.ts. In here, we will combine all our reducers using combineReducers and export them as rootReducer[You can call it anything really] as shown below.

import { combineReducers } from 'redux';
import { getPostsReducer } from './PostReducer';

const rootReducer = combineReducers({
  posts: getPostsReducer
});

export default rootReducer;

Now we will create our store. A store holds the whole state tree of the application. In the store folder, let's have index.ts and add the following code:

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunkMiddleware))
);

export type AppState = ReturnType<typeof rootReducer>;
export default store;

All we are doing in here is creating a store from the combined reducers called rootReducer. composeWithDevTools will allow you to monitor global state in your browser if you've installed the Redux Devtools Extension. applyMiddleware(thunkMiddleware) allows us to dispatch async actions

To make the store available to React components, in src/index.ts, we wrap App in Provider and pass the store as shown below

import { Provider } from 'react-redux';
import store from './redux/store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

At this point, you should see your global state with an empty array of posts as shown below.

The only way to change the state in the store is through an action dispatch. In the actions folder create PostActions.ts and add the following code:

import { GET_POSTS, PostActionTypes } from '../types/PostTypes';
import { Post } from '../interfaces/Post';

export const getPostsAction = (posts: Post[]): PostActionTypes => {
  return {
    type: GET_POSTS,
    payload: posts
  };
};

The getPostsAction function accepts an array of posts and returns a type of GET_POSTS and posts data passed to the payload variable. Note that type and payload can be given names of your choice.

To fetch our posts from the fake API, let's create Posts.ts in the effects folder and add the following code.

import { getPostsAction } from '../actions/PostActions';
import { Dispatch } from 'redux';
import { PostActionTypes } from '../types/PostTypes';
export const getPosts = () => {
  return function (dispatch: Dispatch<PostActionTypes>) {
    const POST_URL = 'https://jsonplaceholder.typicode.com/posts';
    fetch(POST_URL, {
      method: 'GET'
    })
      .then(res => res.json())
      .then(data => {
        dispatch(getPostsAction(data));
        return data;
      });
  };
};

All we are doing here is dispatching the getPostsAction and passing it the data from the fake API.

React Component

Finally, in App.ts, we can access our App State. Update App.ts as follows:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getPosts } from './redux/effects/Posts';
import { Post } from './redux/interfaces/Post';
import { AppState } from './redux/store';

export default function Posts() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPosts());
  }, [dispatch]);
  const posts = useSelector((state: AppState) => state.posts);
  const postItems = posts.posts.map((post: Post) => (
    <div key={post.id}>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  ));
  return <div>{postItems}</div>;
}

In here, we bring in useDispatch and useSelector from react-redux. The useDispatch hook is used to dispatch actions as needed. In our case, we are passing the getPosts effect to dispatch in the useEffect hook. This will add the data coming from the fake API to our redux store as soon as the App component mounts. At this point your redux store should look like this:

useSelector works more or less like mapStateToProps when using connect. It allows us to access app state in a React functional component. In our case we are interested in getting posts from the posts state and that is exactly why we are iterating through posts.posts. Then we display the post title with post.title and body with post.body. Interesting right?

Conclusion

There are many ways you could use redux in your React project. Go with a setup that works for you. Redux can have a lot of boilerplate but comes in handy once the boilerplate code is out of the way.

Happy coding!