DEV Community: Satty

🚀 How to Deploy Your Next.js Portfolio Site for Free Using GitHub & Vercel

Satty — Thu, 24 Jul 2025 04:24:14 +0000

Hello! I recently built a portfolio site with Next.js and published it for free using GitHub and Vercel. In this article, I’ll walk you through the steps, making it easy for beginners to follow.

💡 You can check the actual portfolio site we’re going to create and deploy in this article here👉 satty-portfolio.vercel.app.
Feel free to use it as a reference for design and functionality!

1. Prerequisites

GitHub account
Vercel account
Next.js project

Create a Next.js Project (If you haven't already)

npx create-next-app@latest my-portfolio
cd my-portfolio

2. Create a GitHub Repository & Upload Your Code

Create a new repository on GitHub (for example, my-portfolio).
Open your terminal, navigate to your Next.js project directory, and initialize Git, commit, and push your code.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/my-portfolio.git
git push -u origin main

3. Set Up Deployment on Vercel

Log in to Vercel

Go to Vercel and sign in with your GitHub account (“Continue with GitHub”).

Create a New Project

Click "New Project"
Select the repository you just pushed to GitHub
Default settings are fine for Next.js projects
Click "Deploy"

4. Confirm Automatic Deployment

Once deployed, Vercel will give you a live URL, such as https://my-portfolio.vercel.app.
From now on, every time you push to GitHub, Vercel will automatically deploy the latest version.

👀 My own portfolio site is live here using this setup.
Take a look at the design and features for inspiration!

5. (Optional) Set Up Environment Variables

If you need to use environment variables (for example, API keys or CMS integration):

Go to your project settings in Vercel > "Environment Variables" and add any required variables.

Example (for NEWT CMS):

Name: NEWT_API_TOKEN
Value: xxxxxxxxxxxxxxxxxxxxxxx

6. (Optional) Set Up a Custom Domain

Go to Project > Settings > Domains in Vercel to add your custom domain.
Update your DNS provider’s CNAME or A record as instructed by Vercel.

7. Summary

That's it! Now you can easily publish your Next.js portfolio site using GitHub and Vercel.
From now on, your workflow is simple: Develop locally → Push to GitHub → Vercel auto-deploys your updates.

✅ The portfolio site I published by following these steps is here👉 satty-portfolio.vercel.app.
If you’re curious about the implementation or want to see a live example, feel free to check it out!

📨 The Easiest Way to Add a Contact Form to Your Site (Using Google Forms)

Satty — Wed, 09 Jul 2025 02:04:35 +0000

Want to add a contact form to your site without spinning up a backend?

Looking for something quick, free, and serverless?

In this article, I’ll show you two practical ways to embed Google Forms into your Next.js site, with clean UI and no server-side headaches.

See the working version on my portfolio:
👉 https://satty-portfolio.vercel.app/

✅ What You’ll Learn

✅ How to embed Google Forms using an iframe
✅ How to customize your own UI and POST to Google Forms
✅ The pros and cons of both approaches
✅ Code examples using Next.js (App Router) + MUI
✅ Live example from my own portfolio site

🎯 Who Is This For?

Developers who want a simple contact form
Those looking for a serverless solution
Next.js + MUI users who want better design flexibility

🛠 Tech Stack (My Portfolio Site)

Feature	Stack
Framework	Next.js (App Router + TypeScript)
UI Library	MUI (Material UI)
Form Submission	Google Forms

🧩 Option 1: Embed Google Form with `<iframe>` (Easiest Way)

🔧 Steps

Create your form at Google Forms
Click Send → <> Embed icon
Copy the iframe code

🧪 Example

<iframe
  src="https://docs.google.com/forms/d/e/xxxxxxxx/viewform?embedded=true"
  width="100%"
  height="800"
  frameborder="0"
  marginheight="0"
  marginwidth="0"
>
  Loading…
</iframe>

✅ Pros & Cons

Pros	Cons
Super fast setup	Limited styling/customization
Google Sheets support	May not feel "native" to your site
Works out of the box	Not great for brand consistency

🎨 Option 2: Create a Custom Form and POST to Google Forms

Google Forms has a hidden endpoint (formResponse) that lets you POST data directly. This allows full UI freedom while keeping your form submission serverless.

✨ What You’ll Need

The form’s action URL (formResponse)
Each field’s name attribute (entry.XXXXXXX)

🔍 How to Get the Form Action URL and Field Names

1.Get the action URL

Open your Google Form
Right-click → “View Page Source”
Look for:

<form action="https://docs.google.com/forms/d/e/xxxxxx/formResponse" ...>

2.Get the field names
Search the source code for:

<input name="entry.123456789" />
<input name="entry.987654321" />
<textarea name="entry.192837465" />

Use these entry.XXXXXXX values in your code.

🧪 Simplified Code Example

'use client';

import { useState } from 'react';

const FORM_URL = 'https://docs.google.com/forms/d/e/xxxxxxxx/formResponse';

export default function ContactForm() {
  const [form, setForm] = useState({ name: '', email: '', message: '' });
  const [submitted, setSubmitted] = useState(false);

  const handleChange = (e: any) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: any) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append('entry.123456789', form.name);
    formData.append('entry.987654321', form.email);
    formData.append('entry.192837465', form.message);

    try {
      await fetch(FORM_URL, {
        method: 'POST',
        mode: 'no-cors',
        body: formData,
      });
      setSubmitted(true);
    } catch (err) {
      alert('Something went wrong. Please try again.');
    }
  };

  if (submitted) return <p>📨 Thanks! Your message has been sent.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Your Name" onChange={handleChange} required />
      <input name="email" placeholder="Your Email" type="email" onChange={handleChange} required />
      <textarea name="message" placeholder="Your Message" onChange={handleChange} required />
      <button type="submit">Send</button>
    </form>
  );
}

⚖️ Which Method Should You Use?

Scenario	Recommendation
Want something super quick	✅ Use method
Need full control over styling	✅ Use POST method
Want to track events in Google Analytics	✅ Use POST + GA4 event

🔗 Live Example

See the working version on my portfolio:
👉 https://satty-portfolio.vercel.app/

✅ Summary

Google Form Integration	Value
Free and easy	✅ No server required
Embed or customize	✅ Two flexible methods
Integrates with MUI/Next	✅ Works in any frontend project

Whether you're launching a portfolio or MVP, Google Forms is a rock-solid, free, and fast option. Start simple, scale smart.

😎✨ My UX Portfolio: The Real Me, Unfiltered!

Satty — Tue, 08 Jul 2025 07:28:32 +0000

Hi DEV Community! 👋

I'm Satty, a UX Engineer from Japan.

As someone who works at the intersection of UI/UX design and engineering, I often find that resumes alone don’t fully communicate my thinking process or design intent.

So, I decided to create a portfolio site — not just to show what I’ve built, but to share the why behind it.

🎉 Here’s My Portfolio!

👉 satty-portfolio.vercel.app

It’s mobile-friendly, lightweight, and yes — it’s in English, as I hope to connect with people around the world!

🛠️ Tech Stack

Purpose	Tool
Framework	Next.js (App Router + TypeScript)
UI Library	MUI (Material UI)
Deployment	Vercel (GitHub integrated)
Contact Form	Google Forms (serverless setup)
Analytics	GA4 (Google Analytics 4)

The goal was to keep the structure lightweight and easy to maintain.

By using Google Forms, I created a functional contact form without needing a custom backend.

✨ Highlights & Design Choices

🔹 UX-first Structure

Before writing any code, I mapped out the goals:

Who will visit this site? What do I want them to know?

Whether you're a hiring manager, a fellow developer, or someone looking for UX ideas — the site is structured to guide you smoothly.

🔹 UI Consistency & Mobile-first

The entire site is styled using customized MUI themes.

From typography to spacing and color palette, everything follows a consistent logic. It’s also fully responsive, with a mobile-first hamburger menu.

🔹 GA4 Integration

I implemented Google Analytics 4 to track key user actions:

page transitions, scroll depth, form submissions, and more — so I can continue improving based on actual behavior.

🔹 Adding a Bit of Fun

While keeping things clear and functional, I also wanted the site to feel fun — not overly formal. You’ll find little bits of humor scattered throughout.

🚀 What’s Next?

I plan to write articles sharing my UX decisions and implementation tips
I’ll be experimenting with UI tweaks based on user behavior
Eventually, I hope to turn this into a mini UX case study series

💬 Feedback is Welcome!

Thanks so much for reading.

The site is still evolving, so if you have feedback, suggestions, or even just reactions — I’d love to hear them.

Feel free to reach out via the site’s contact form or drop a comment here!