How To Create A Next Js App

Create a Next.js App and Consume Medium.com API

In this tutorial, we are going to create a Next.js application and after that we will consume this api https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@nutanbhogendrasharma. This url gives us JSON data, which we are going to consume in our Next.js application.

What is Next.js?

Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.

System Requirements

1) Node.js 12.0 or later
2) Visual Studio Code IDE

Create a Next.js App

Open command prompt and go to project folder. After that create a next.js project.

Creating a new N ext.js app using create-next-app, which sets up everything automatically for us. My project name is hello-world.

          F:
cd javascript-projects\nextjs-projects
npx create-next-app hello-world

It will ask "Ok to proceed", you have to press "Y" and then enter.

Next.js project created successfully. Now we need to run the application.

Starts Next.js in development mode

          cd hello-world
npm run dev

Nextjs application has started and type url http://localhost:3000/ in browser. You should get default page like below:

Modify pages/index page

Open hello-world project in Visual Studio Code IDE. Open pages/index.js file. Remove everything and write following code in paes/index.js.

                      export default function Home() {
              return (
              <div>
              <h1>Hello World</h1>
              </div>
              )
}

Check in browser. You should get like below:

Consume medium.com api

I am consuming my own medium.com api. Url is https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@nutanbhogendrasharma/.

Write following code is pages/index.js file.

                      import React, { useState, useEffect } from 'react';                    export default function Home() {                      const [error, setError] = useState(null);
              const [isLoaded, setIsLoaded] = useState(false);
              const [blogs, setBlogs] = useState([]);                                useEffect(() => {
                fetch("
                        https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@nutanbhogendrasharma/            ")
              .then(res => res.json())
              .then(
              (data) => {
              setIsLoaded(true);
              setBlogs(data.items);
              },
              (error) => {
              setIsLoaded(true);
              setError(error);
              }
              )
              }, [])                                if (error) {
              return <div>Error: {error.message}</div>;
              } else if (!isLoaded) {
              return <div>Loading...</div>;
              } else {
              return (
              <div>
              {blogs.map(item => (
              <div>
              <div>
              <img src={item.thumbnail} width='150px' height='150px' />
              </div>
              <div>
              <a href={item.link} target="_blank">{item.title}</a>
              </div>
              </div>
              ))}
              </div>
              );
              }
            }

Check in browser http://localhost:3000/

You should get output like below:

We are able to fetch data from medium api. Let us add some styling to it.

Add some styling

Add css in styles/Home.module.css

Open styles/Home.module.css file. Remove everything and write following css:

                      .container {
              min-height: 100vh;
              margin-top: 20px;
              margin-left: 20px;
              padding: 0 0.5rem;
              display: flex;
              flex-direction: column;                                }                                .main {
              padding: 1rem 0;
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: left;
}

Add ../styles/Home.module.css in pages/index.js

                      import styles from '../styles/Home.module.css'

Add class name in div tag

          return (
            <div            className={styles.container}>
            {blogs.map(item => (
            <div            className={styles.main}>
            <div>
            <img src={item.thumbnail} width='150px' height='150px' />
            </div>
            <div>
            <a href={item.link} target="_blank">{item.title}</a>
            </div>
            </div>
            ))}
            </div>
            );

Full code of pages/index.js

                      import styles from '../styles/Home.module.css';            
import React, { useState, useEffect } from 'react';          export default function Home() {                      const [error, setError] = useState(null);
            const [isLoaded, setIsLoaded] = useState(false);
            const [blogs, setBlogs] = useState([]);                            useEffect(() => {
              fetch("https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@nutanbhogendrasharma/")
              .then(res => res.json())
              .then(
              (data) => {
              setIsLoaded(true);
              setBlogs(data.items);
              },
              (error) => {
              setIsLoaded(true);
              setError(error);
              }
              )
              }, [])
                    if (error) {
            return <div>Error: {error.message}</div>;
            } else if (!isLoaded) {
            return <div>Loading...</div>;
            } else {
            return (
            <div              className={styles.container}>                      {blogs.map(item => (
              <div              className={styles.main}>
              <div>
              <img src={item.thumbnail} width='150px' height='150px' />
              </div>
              <div>
              <a href={item.link} target="_blank">{item.title}</a>
              </div>
              </div>
              ))}
              </div>
              );
              }
}

Check in browser, output should get like below:

Display feed title

          import styles from '../styles/Home.module.css'
import React, { useState, useEffect } from 'react';          export default function Home() {          const [error, setError] = useState(null);
            const [isLoaded, setIsLoaded] = useState(false);
            const [feed, setFeed] = useState([]);                        
            const [blogs, setBlogs] = useState([]);                            useEffect(() => {
              fetch("https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@nutanbhogendrasharma/")
              .then(res => res.json())
              .then(
              (data) => {
              setIsLoaded(true);
              setFeed(data.feed)              
              setBlogs(data.items);
              },
              (error) => {
              setIsLoaded(true);
              setError(error);
              }
              )
              }, [])
                    if (error) {
            return <div>Error: {error.message}</div>;
            } else if (!isLoaded) {
            return <div>Loading...</div>;
            } else {
            return (
            <div className={styles.container}>
            <h1>
              {feed.title}
              </h1>                                {blogs.map(item => (
            <div className={styles.main}>
            <div>
            <img src={item.thumbnail} width='150px' height='150px' />
            </div>
            <div>
            <a href={item.link} target="_blank">{item.title}</a>
            </div>
            </div>
            ))}
            </div>
            );
            }
}

Check in browser:

We are able to fetch data from Medium.com API. Thanks for reading.