Next.js ??

Next.js? ??? ???(SSR), ?? ??? ??(SSG), API ?? ? ?? ??? ??? ?? ? ??????? ???? ?? React ?? ????????. Vercel? ?? ? ?? React? ???? ?? ???? ??? ????? ?? ?? ??? ??????? ???? ????? ??????.

---

Next.js? ???? ??? ??????

1. ?? ? ???(SSR): ???? ???? ????? ??? ????? SEO? ?????.
2. ?? ??? ??(SSG): ?? ??? ???? ?? ?? ? ?? HTML? ?????.
3. API ??: ?? ??? ????? ?? ???? API? ?????.
4. ?? ?? ???: ?? ??? ?? ?? ???? ???? ??????.
5. ???? ??: ?? ??? ???, ?? ?? ? ?? ??.
6. ?? CSS ??: CSS, SASS, TailwindCSS ? CSS-in-JS ?????? ?? ?????.

---

Next.js? ?? ??

1. ?? ?? ???

• ??? ????? ?? ??? ???? ??? ???.

// File: pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

// Access this page at: /about

2. ?? ???

Next.js? ????? ?? ???? ?? ????? ? ?? ??? SEO? ?????.

• ?? ??? ??(SSG): ???? ?? ? ?????.
• ?? ? ???(SSR): ???? ???? ??????.

// SSG Example
export async function getStaticProps() {
  return { props: { message: "Static Content" } };
}

// SSR Example
export async function getServerSideProps() {
  return { props: { message: "Dynamic Content" } };
}

export default function Page({ message }) {
  return <h1>{message}</h1>;
}

3. API ??

pages/api ????? ??? API ?????? ?????.

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

4. ?? ???

???? ???? ?? ??? ????.

// File: pages/product/[id].js
import { useRouter } from "next/router";

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Product ID: {id}</h1>;
}

5. ?? CSS ??

??? CSS, CSS ?? ? TailwindCSS? ?? ?? ?????? ?????.

// File: pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

// Access this page at: /about

---

?? ??

1. ?? ?? ??: ? ???? ??? JavaScript? ?????.
2. ??? ???: ??/??? ?? ??? ???? ??????.

// SSG Example
export async function getStaticProps() {
  return { props: { message: "Static Content" } };
}

// SSR Example
export async function getServerSideProps() {
  return { props: { message: "Dynamic Content" } };
}

export default function Page({ message }) {
  return <h1>{message}</h1>;
}

1. ?? ?? ???(ISR): ?? ???? ?? ???? ?? ?? ???? ???????.

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

---

Vercel? ??? ??

• Next.js? ??? ???? Vercel ??? ????? ????.
• ????? ???? ???? ?????.
• ??, ???? ?? ? ?? ???? ?????.

---

Next.js? ??

1. ??? SEO: SSR ? SSG? ?? ?? ??? ???? ?? ???? ? ????.
2. ?? ??: ?? ???, ?? ? ??? ??.
3. ???: ????? ???? ?????(SSR, SSG ? CSR ??).
4. ??? ??: ? ?? ??(HMR), ???? API ? ??? ??.

---

Next.js ?? ??

1. ????? ???
   • ? ?? ??? ??? ?? ?? ???, ???? ?? ? ??? ???.
2. ??? ? ??? ???
   • ?? ??? ??? ?? ??? ???? ?????.
3. ???? ? ?? ??
   • ??? ???? ?? API ?? ? SSR.

---

??

Next.js? React? ??? ??? SSR, SSG, ISR ?? ?? ?? ??? ???? ?? ? ??? ??????. ??? ?? ?????? ?? ?? ???????? ?? ??? ????? ????????.

---

? ??? Next.js ??: ?? React ??????? ?? ???? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!