From Zero to Deployed: Building Your First Next.js App in 30 Minutes

Introduction

You’ve heard the buzz about Next.js. Your Twitter feed is full of developers raving about it. Your favorite tech YouTubers won’t stop talking about it. But every time you think about learning it, you feel overwhelmed. Where do you even start?

Here’s the truth: you can go from zero to a deployed Next.js application in just 30 minutes. No, seriously. By the end of this article, you’ll have a real blog running on the internet that you can show your friends.

Let’s do this.

What We’re Building

We’re creating a simple personal blog with:

• A homepage listing all posts
• Individual post pages
• An about page
• Clean, responsive design
• Deployed to the internet (free!)

No database needed. No complex setup. Just you, Next.js, and 30 minutes.

Minutes 0–5: Setup

Open your terminal and run:

npx create-next-app@latest my-blog

When prompted, answer:

• TypeScript? No (keep it simple for now)
• ESLint? Yes
• Tailwind CSS? Yes (makes styling easy)
• App Router? Yes
• Import alias? No

cd my-blog
npm run dev

Open http://localhost:3000. You should see the Next.js welcome page. Time elapsed: 5 minutes.

Minutes 5–10: Creating Your First Blog Post

Delete everything in app/page.js and replace it with:

export default function Home() {
  const posts = [
    {
      id: 1,
      title: "My First Blog Post",
      date: "2024-01-15",
      excerpt: "This is where my journey begins..."
    },
    {
      id: 2,
      title: "Why I Love Next.js",
      date: "2024-01-20",
      excerpt: "Let me tell you about this amazing framework..."
    },
    {
      id: 3,
      title: "10 Tips for Beginner Developers",
      date: "2024-01-25",
      excerpt: "Here's what I wish I knew when I started..."
    }
  ];

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-3xl mx-auto">
        <h1 className="text-4xl font-bold text-gray-900 mb-2">My Blog</h1>
        <p className="text-gray-600 mb-8">Thoughts on code and life</p>
        
        <div className="space-y-6">
          {posts.map(post => (
            <article key={post.id} className="bg-white p-6 rounded-lg shadow-sm">
              <h2 className="text-2xl font-semibold text-gray-900 mb-2">
                {post.title}
              </h2>
              <p className="text-sm text-gray-500 mb-3">{post.date}</p>
              <p className="text-gray-700">{post.excerpt}</p>
              <a href={`/posts/${post.id}`} className="text-blue-600 hover:underline mt-2 inline-block">
                Read more →
              </a>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

Refresh your browser. You now have a beautiful blog homepage! Time elapsed: 10 minutes.

Minutes 10–18: Individual Blog Posts

Create the folder structure: app/posts/[id]/page.js

const posts = {
  1: {
    title: "My First Blog Post",
    date: "2024-01-15",
    content: `This is my first blog post built with Next.js. 
    
I've always wanted to start blogging, and Next.js made it so easy to get started. The file-based routing is intuitive, and I love how fast everything loads.

I'm excited to share my journey with you all!`
  },
  2: {
    title: "Why I Love Next.js",
    date: "2024-01-20",
    content: `After building several projects, I can confidently say Next.js is amazing.Here's what I love:
- Zero configuration needed
- Built-in routing
- Great performance out of the box
- Easy deploymentIf you're still using Create React App, give Next.js a try. You won't regret it.`
  },
  3: {
    title: "10 Tips for Beginner Developers",
    date: "2024-01-25",
    content: `Starting your coding journey can be overwhelming. Here's my advice:1. Build projects, not just tutorials
2. Don't try to learn everything at once
3. Join a community
4. Read other people's code
5. Take breaks when you're stuckRemember: everyone starts as a beginner. Keep going!`
  }
};export default function Post({ params }) {
  const post = posts[params.id];  if (!post) {
    return <div className="min-h-screen flex items-center justify-center">Post not found</div>;
  }  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <article className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-sm">
        <a href="/" className="text-blue-600 hover:underline mb-4 inline-block">
          ← Back to home
        </a>
        <h1 className="text-4xl font-bold text-gray-900 mb-2">{post.title}</h1>
        <p className="text-gray-500 mb-6">{post.date}</p>
        <div className="prose prose-lg">
          {post.content.split('\n').map((paragraph, i) => (
            <p key={i} className="mb-4 text-gray-700">{paragraph}</p>
          ))}
        </div>
      </article>
    </div>
  );
}

Now click on any “Read more” link. You have individual post pages! Time elapsed: 18 minutes.

Minutes 18–22: Adding an About Page

Create app/about/page.js:

export default function About() {
  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-sm">
        <a href="/" className="text-blue-600 hover:underline mb-4 inline-block">
          ← Back to home
        </a>
        <h1 className="text-4xl font-bold text-gray-900 mb-6">About Me</h1>
        <div className="space-y-4 text-gray-700">
          <p>
            Hi! I'm a developer learning to build cool things with Next.js.
          </p>
          <p>
            This blog is where I share my journey, learnings, and thoughts 
            about web development.
          </p>
          <p>
            When I'm not coding, you can find me reading, hiking, or 
            trying out new coffee shops.
          </p>
        </div>
      </div>
    </div>
  );
}

Add a link to the about page in app/page.js after the subtitle:

<p className="text-gray-600 mb-2">Thoughts on code and life</p>
<a href="/about" className="text-blue-600 hover:underline mb-8 inline-block">
  About me →
</a>

Time elapsed: 22 minutes.

Minutes 22–30: Deploy to the Internet

1. Create a GitHub account if you don’t have one
2. Install GitHub Desktop or use the command line:

git init
git add .
git commit -m "My first Next.js blog"
git branch -M main
git remote add origin https://github.com/yourusername/my-blog.git
git push -u origin main

1. Go to vercel.com
2. Sign up with GitHub
3. Click “New Project”
4. Import your my-blog repository
5. Click “Deploy”

Wait 2 minutes. Your blog is now live on the internet! Vercel gives you a URL like my-blog-xyz.vercel.app.

Total time: 30 minutes. You’re done!

What You Just Learned

In 30 minutes, you:

• Set up a Next.js project
• Used file-based routing
• Created dynamic routes with [id]
• Styled with Tailwind CSS
• Deployed to production

Next Steps

Now that you have a live blog:

1. Customize the content with your own posts
2. Add more pages (contact, portfolio, etc.)
3. Change the colors to match your style
4. Share it with friends!

Every time you push to GitHub, Vercel automatically updates your live site. How cool is that?