321 words

2 minutes

Next.js - Why It's My Go-To Framework

2024-06-10

Development

Next.js

/

React

/

Web Development

/

Framework

Next.js - My Go-To Framework#

If I’m building anything serious, it’s probably Next.js.

Why Next.js?#

1. File-Based Routing#

1
pages/
2
├── index.js         → /
3
├── about.js         → /about
4
├── blog/
5
│   ├── index.js     → /blog
6
│   └── [slug].js    → /blog/:slug
7
└── api/
8
    └── hello.js     → /api/hello

No router configuration needed. Create file = Create route. Magic.

2. API Routes#

Full backend in the same project:

1
export default async function handler(req, res) {
2
  if (req.method === 'POST') {
3
    const user = await createUser(req.body);
4
    return res.status(201).json(user);
5
  }
6

7
  const users = await getUsers();
8
  res.status(200).json(users);
9
}

3. Multiple Rendering Strategies#

1
// Static Site Generation (SSG)
2
export async function getStaticProps() {
3
  const posts = await getPosts();
4
  return { props: { posts } };
5
}
6

7
// Server-Side Rendering (SSR)
8
export async function getServerSideProps() {
9
  const data = await fetchData();
10
  return { props: { data } };
11
}
12

13
// Incremental Static Regeneration (ISR)
14
export async function getStaticProps() {
15
  return {
16
    props: { ... },
17
    revalidate: 60 // Rebuild every 60 seconds
18
  };
19
}

4. Image Optimization#

1
import Image from 'next/image';
2

3
<Image
4
  src="/profile.jpg"
5
  alt="LUKKID"
6
  width={200}
7
  height={200}
8
  priority
9
/>

Automatic lazy loading, WebP conversion, and responsive images!

5. Built-in CSS Support#

1
// CSS Modules
2
import styles from './Button.module.css';
3

4
// Tailwind works perfectly
5
<div className="bg-blue-500 text-white p-4">

App Router (Next.js 13+)#

The new app/ directory is awesome:

1
app/
2
├── page.js          → /
3
├── layout.js        → Shared layout
4
├── loading.js       → Loading UI
5
├── error.js         → Error handling
6
└── blog/
7
    └── [slug]/
8
        └── page.js  → /blog/:slug

Server Components#

1
// This runs on the server!
2
async function BlogPosts() {
3
  const posts = await db.posts.findMany();
4

5
  return (
6
    <ul>
7
      {posts.map(post => (
8
        <li key={post.id}>{post.title}</li>
9
      ))}
10
    </ul>
11
  );
12
}

My Next.js Project Structure#

1
src/
2
├── app/
3
│   ├── (auth)/
4
│   │   ├── login/
5
│   │   └── register/
6
│   ├── dashboard/
7
│   └── api/
8
├── components/
9
├── lib/
10
├── hooks/
11
└── styles/

Deploy in Seconds#

1
# With Vercel
2
npx vercel
3

4
# That's it. Production ready.

When NOT to Use Next.js#

Simple static sites → Astro might be lighter
React learning → Start with Vite
Non-React teams → Consider alternatives

Next.js is powerful. Learn it well!

Next.js - Why It's My Go-To Framework

https://blog.lukkid.dev/posts/nextjs-framework/

Author

LUKKID

Published at

2024-06-10

License

CC BY-NC-SA 4.0

ngrok - เปิด Port แบบง่ายๆ ไม่ต้องยุ่งกับ Router

Dark Mode Implementation Guide

1

Next.js - My Go-To Framework

Why Next.js?

App Router (Next.js 13+)

My Next.js Project Structure

Deploy in Seconds

When NOT to Use Next.js