DEV Community: JinChul Moon

Creating Dynamic Pages with Next.js and Fetching Data from a REST API

JinChul Moon — Sun, 23 Mar 2025 04:45:06 +0000

In this tutorial, we’ll go over how to create dynamic pages in Next.js using React and REST API integration. This approach allows us to fetch data dynamically and render it on the page.

Creating the REST API Endpoint in WordPress

First, we use WordPress to expose a REST API that provides our content. In this case, we are fetching portfolio items via the API endpoint:

https://creative-moon.com/wp-json/wp/v2/portfolio?per_page=100

This endpoint returns a list of portfolio items, which we can then use in Next.js to render pages dynamically.

Fetching Data in Next.js with getStaticPaths and getStaticProps

Next, we use getStaticPaths and getStaticProps in Next.js to generate dynamic pages based on the fetched data.

// src/pages/works/[slug].tsx

import { GetStaticProps, GetStaticPaths } from 'next';

export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch('https://creative-moon.com/wp-json/wp/v2/portfolio?per_page=100');
  const posts = await res.json();

  // Generating paths based on the slug
  const paths = posts.map((post: any) => ({
    params: { slug: post.slug },
  }));

  return {
    paths,
    fallback: 'blocking',  // The page will wait to be generated before serving
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const res = await fetch(`https://creative-moon.com/wp-json/wp/v2/portfolio?slug=${params?.slug}`);
  const postData = await res.json();

  if (!postData || postData.length === 0) {
    return { notFound: true };  // Return 404 if no data is found
  }

  const post = postData[0];

  return {
    props: { post },
    revalidate: 60,  // Revalidate the page every 60 seconds
  };
};

const WorkDetail = ({ post }: { post: any }) => {
  if (!post) return <div>Loading...</div>;  // Show loading if the data is still fetching

  return (
    <div>
      <h1>{post.title.rendered}</h1>
      <div>{post.content.rendered}</div>  {/* Render the content fetched from the API */}
    </div>
  );
};

export default WorkDetail;

Explanation of getStaticPaths and getStaticProps

getStaticPaths: This function is responsible for generating dynamic routes. It fetches data from the REST API, extracts the slug for each post, and uses it to generate paths that Next.js will build statically.
getStaticProps: This function fetches the data for a specific post based on the slug. It fetches content dynamically from the REST API and passes it as props to the page component.

Rendering Dynamic Pages

With Next.js, dynamic pages are created based on the slug of each portfolio post. The title and content of each post are fetched from the API and displayed on the page.

// Inside the WorkDetail component
const WorkDetail = ({ post }: { post: any }) => {
  if (!post) return <div>Loading...</div>;

  return (
    <div>
      <h1>{post.title.rendered}</h1>  // Dynamically render post title
      <div>{post.content.rendered}</div>  // Dynamically render post content
    </div>
  );
};

Final Outcome

When navigating to http://localhost:3000/works/{slug}, Next.js will fetch the data from the REST API and display the content dynamically on the page.
This method allows Next.js to generate static pages based on dynamic data fetched from WordPress.

⸻

By using this method, you can easily fetch and render dynamic content from REST APIs in Next.js, making it ideal for headless CMS like WordPress. The combination of static generation and server-side rendering in Next.js powers this integration effectively.

I spent hours today troubleshooting a small issue with pages/works/[slug].tsx. It turned out to be a simple path problem, but after checking and fixing the file structure, everything started working as expected. It was frustrating but rewarding to finally resolve it!

Excited to Dive into React, Next.js, and GSAP!

JinChul Moon — Sat, 22 Mar 2025 15:43:57 +0000

Today, I’m absolutely thrilled to share that I’ve learned some fantastic new skills! I’ve been diving into React and Next.js, and it feels amazing to be able to build dynamic, modern web applications with these tools. I’m also integrating GSAP for smooth animations and interactions—it’s a game-changer!

The best part? I’ve moved away from WordPress and am now embracing native development (in the true sense!). It’s been such an exciting journey, and I’m finally in control of the entire stack. Starting from the very basics, I set up my React and Next.js environment, ensuring everything was organized right from the start. Here’s how I approached the process:

Setting up React and Next.js

I began with a clean slate, installing React and Next.js and configuring the folder structure properly to keep everything organized:

npx create-next-app@latest my-project --typescript

Folder Structure

I’ve set up a clear and structured folder layout to keep my project organized as it grows. Here’s what I’ve structured so far:

/app
  ├── /components        # All reusable components
  ├── /pages            # Page-level components, including Home, About, etc.
  ├── /styles           # SCSS/CSS files
  ├── /public           # Static assets like images
  └── /utils            # Utility functions and helpers

By organizing my project like this, I can easily maintain and scale it without getting lost in the code. Everything is modular and easy to find.

Integrating GSAP for Smooth Animations

On top of setting up the project and structure, I’ve been integrating GSAP to add dynamic animations to the page. Here’s a sample of how I used GSAP to animate text when it appears on scroll:

import { useEffect } from 'react';
import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default function HomePage() {
  useEffect(() => {
    const homeTitle = document.querySelector('.home-intro-top__title');
    const aniTitle = document.querySelector('.home-intro-top__ani');
    const baseTitle = document.querySelector('.home-intro-top__base');

    if (homeTitle && aniTitle && baseTitle) {
      const words = baseTitle.innerText.trim().split(' ');

      // Wrap each word in a div for animation
      aniTitle.innerHTML = words.map(word =>
        `<div class="home-intro-top__word">
          <div class="home-intro-top__word-child">${word}</div>
        </div>`
      ).join(' ');

      // GSAP animation
      const wordElements = aniTitle.querySelectorAll('.home-intro-top__word');
      wordElements.forEach((word, index) => {
        gsap.fromTo(
          word,
          { opacity: 0, y: 50 },
          { opacity: 1, y: 0, delay: index * 0.1, duration: 0.8 }
        );
      });
    }

    ScrollTrigger.refresh();
  }, []);

  return (
    <div className="home-intro-top__title">
      <div className="home-intro-top__ani"></div>
      <div className="home-intro-top__base">Transform Ideas into Fluid Digital Solutions</div>
    </div>
  );
}

The Excitement of Native Development

I’ve always wanted to get into native development, and now I feel like I’ve made that transition! Moving away from WordPress and embracing React and Next.js means I get to create custom, scalable web apps from scratch. And what better way to start than by working on my personal homepage?

What’s Next?

This is just the beginning. Now that I’ve gotten the hang of React, Next.js, and GSAP, I’m eager to take on more commercial and public projects. I want to build websites that are not only functional but also visually dynamic and user-friendly.

I’m super pumped about what’s coming next, and I can’t wait to challenge myself with more complex projects. These new tools and techniques are opening up endless possibilities, and I’m ready to dive even deeper into native development.

Building a House Price Prediction Model with FastAPI and Deployment

JinChul Moon — Sat, 22 Mar 2025 15:42:21 +0000

In the previous post, we built a Random Forest model to predict house prices using the Toronto housing dataset. Now, let’s move forward by creating a FastAPI web application to serve this model and deploy it so others can interact with it. Below, I’ll guide you through the process of creating the FastAPI application, setting up Nginx as a reverse proxy, and deploying the model on AWS EC2.

Setting Up the FastAPI Application

First, we need to set up the FastAPI app that will serve our machine learning model. We’ll structure the app as follows:

Install FastAPI and Uvicorn:

pip install fastapi uvicorn

Create the FastAPI App:

In the app.py file, we will create a POST endpoint /predict that accepts the input features of the house and returns the predicted price using our trained model.

from fastapi import FastAPI
from pydantic import BaseModel
import joblib
import pandas as pd
import numpy as np
import logging

# Load the trained model
model_path = "models/random_forest_model.pkl"
model = joblib.load(model_path)

app = FastAPI()

# Define the input data model
class HouseFeatures(BaseModel):
    sqft: int
    bedrooms: int
    bathrooms: int
    parking: int
    mean_district_income: int

@app.post("/predict")
async def predict_house_price(data: HouseFeatures):
    try:
        input_data = data.dict()
        logging.info(f"🔍 Received input: {input_data}")

        input_df = pd.DataFrame([input_data])
        input_df = input_df.reindex(columns=expected_features, fill_value=0)

        logging.info(f"📊 Processed DataFrame for prediction:\n{input_df}")

        predicted_price = model.predict(input_df)[0]

        if predicted_price < 20:
            predicted_price = np.exp(predicted_price)

        logging.info(f"💰 Predicted price: {predicted_price}")

        return {"predicted_price": predicted_price}

    except Exception as e:
        logging.error(f"❌ Prediction error: {str(e)}")
        raise HTTPException(status_code=400, detail=f"Prediction error: {str(e)}")

Setting Up Reverse Proxy with Nginx

After your FastAPI app is working locally, you can set it up on a server. For production, we recommend using Nginx as a reverse proxy to route requests from port 80 or 8080 to FastAPI running on port 8000.

Install Nginx:

sudo apt install nginx

Nginx Configuration:

Edit the /etc/nginx/nginx.conf file or the server block configuration to forward the requests to FastAPI.

server {
    listen 8080;
    server_name localhost;

    location / {
        proxy_pass http://127.0.0.1:8000;  # Forward requests to FastAPI server
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /predict {
        proxy_pass http://127.0.0.1:8000/predict;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    root /usr/share/nginx/html;
    index index.html;
}

Test and Reload Nginx:

Test the Nginx configuration and reload:

sudo nginx -t
sudo nginx -s reload

Deploying to AWS EC2

Now, let’s deploy the FastAPI app to AWS EC2 to make it accessible from anywhere. This involves several steps:

Launch an EC2 Instance:

• Use AWS EC2 to create an instance.

• Choose an appropriate AMI, such as the latest Ubuntu.

• Ensure the security group allows inbound traffic on ports 80 (HTTP), 443 (HTTPS), and 8000 (for FastAPI).

SSH into the EC2 Instance:

ssh -i "your-key.pem" ubuntu@<your-ec2-public-ip>

Transfer Files to EC2:

Use scp to copy your project files to the server:

scp -i "your-key.pem" /path/to/app.py ubuntu@<your-ec2-public-ip>:/home/ubuntu/

Install Dependencies on EC2:

Inside the EC2 instance, create a virtual environment and install FastAPI, Uvicorn, and other dependencies.

python3 -m venv fastapi_env
source fastapi_env/bin/activate
pip install fastapi uvicorn joblib pandas scikit-learn

Run the Application:

Run the FastAPI app on the EC2 instance:

uvicorn app:app --host 0.0.0.0 --port 8000 --reload

You can test the /predict endpoint using curl or Postman, or through the Swagger UI provided by FastAPI.

Accessing the API

Once the app is running, you can access it via the public IP of the EC2 instance:

http://3.135.188.21:8000/docs

You can test the /predict endpoint using curl or Postman, or through the Swagger UI provided by FastAPI.

GitHub Repository

You can access the source code for this project on my GitHub repository:

GitHub – House Price Prediction

Building a House Price Prediction Model Using Random Forest in Python

JinChul Moon — Sat, 22 Mar 2025 15:20:59 +0000

Today, I want to share my experience of building a House Price Prediction Model using the Random Forest algorithm in Python. This was an exciting project that gave me hands-on experience with Machine Learning and data analysis. Here’s a quick breakdown of how I approached the project:

Data Collection and Preprocessing: I used a publicly available dataset of house prices. The dataset included various features like the number of rooms, location, and other house attributes. First, I cleaned and preprocessed the data by handling missing values and encoding categorical variables.

import pandas as pd
data = pd.read_csv('house_prices.csv')
data.fillna(method='ffill', inplace=True)

Feature Selection: I then selected the most relevant features for the prediction. I used correlation matrices and domain knowledge to choose which columns would help the model make accurate predictions.
Model Training: I used the Random Forest Regressor from the Scikit-learn library. This model works well for regression tasks and can handle non-linear relationships between features.

from sklearn.ensemble import RandomForestRegressor
model = RandomForestRegressor(n_estimators=100, random_state=42)
model.fit(X_train, y_train)

Model Evaluation: After training the model, I evaluated its performance using metrics like Mean Squared Error (MSE) and R-squared to ensure the model was accurate enough for predictions.

from sklearn.metrics import mean_squared_error, r2_score
y_pred = model.predict(X_test)
print(mean_squared_error(y_test, y_pred))
print(r2_score(y_test, y_pred))

Making Predictions: Once satisfied with the model’s performance, I used it to make predictions on new house data and see how well the model generalized to unseen data.

new_data = pd.DataFrame({'rooms': [3], 'location': ['suburb'], 'size': [120]})
predicted_price = model.predict(new_data)
print(predicted_price)

This was a very practical and engaging project that allowed me to apply machine learning concepts in a real-world scenario. The model was able to predict house prices with a good degree of accuracy, and I learned a lot about data preprocessing, model evaluation, and the power of Random Forest for regression tasks.

For a more detailed breakdown, including all code snippets and the dataset used, check out the full post at the link below:

Building a House Price Prediction Model Using Random Forest in Python

Setting Up a Machine Learning Development Environment on Mac

JinChul Moon — Sat, 22 Mar 2025 05:08:43 +0000

Getting into Machine Learning is an exciting journey, and setting up the right development environment is key to success. I’ve just finished setting up my ML environment on my Mac, and it’s been a rewarding experience. Here’s a quick overview of what I did to get started:

Installing Python & Necessary Libraries: I began by installing Python and setting up essential libraries like NumPy, Pandas, Matplotlib, and Scikit-learn for data analysis and visualization.

brew install python
pip install numpy pandas matplotlib scikit-learn

Setting Up Jupyter Notebooks: Jupyter Notebooks is a great tool for experimenting with ML models and data. I installed it and configured it for an easy-to-use interface.

pip install jupyter
jupyter notebook

Creating Virtual Environments: To keep everything organized, I set up virtual environments to isolate dependencies for different projects.

python -m venv myenv
source myenv/bin/activate

Installing TensorFlow & PyTorch: As I dive deeper into Deep Learning, setting up TensorFlow and PyTorch was crucial to work with neural networks and deep learning models.

pip install tensorflow
pip install torch torchvision

I’m now ready to begin exploring ML concepts, building models, and applying these tools to real-world data. This setup is the foundation for all the ML experiments I’m excited to try!

If you’re looking to set up a similar environment, I’ve detailed the entire process. You can read the full guide here:

Read the full post on setting up a Machine Learning environment on Mac