Next ✦ Thuong Truong's blog

Bookmark

⚡️ CLI & Project Setup

npx create-next-app my-app
npm run dev
npm run build
npm start
npm run lint

🧩 Pages & Routing

// pages/index.js
export default function Home() {
  return <h1>Home Page</h1>;
}

// Dynamic route: pages/posts/[id].js
import { useRouter } from 'next/router';
export default function Post() {
  const { query } = useRouter();
  return <div>Post ID: {query.id}</div>;
}

🚀 Data Fetching

// Static Generation
export async function getStaticProps() {
  return { props: { data: 'value' } };
}

// Dynamic Paths
export async function getStaticPaths() {
  return { paths: [{ params: { id: '1' } }], fallback: false };
}

// Server-side Rendering
export async function getServerSideProps() {
  return { props: { data: 'value' } };
}

📦 API Routes

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello API' });
}

🎨 Styling

// CSS Modules
import styles from './Home.module.css';
<div className={styles.header}>Header</div>

// Global CSS: styles/globals.css
// Add import in pages/_app.js
import '../styles/globals.css';

🛡️ Middleware

// middleware.js (Next 13+)
import { NextResponse } from 'next/server';
export function middleware(request) {
  return NextResponse.next();
}

import Link from 'next/link';

<Link href="/about">
  <a>About</a>
</Link>

🗂️ Image Optimization

import Image from 'next/image';

<Image src="/logo.png" width={100} height={100} alt="Logo" />

🛠️ Misc

next export                # Export static site
NEXT_PUBLIC_API_URL=...    # Public

Suggest improve•Raise issue

Nest

Node

Want to update?

Subscribe to my blog to receive the latest updates from us.

Monthly articles

New articles will be created every month.

No spam

All notifications are notified to you, not spam or advertising.