Next.js 入门

构建现代化网站

📊 PPT演示

传统网站的痛点

你已经学会了 HTML、CSS 和 JavaScript，能够创建漂亮的网页和交互式计算器。但是，当你想要构建一个更复杂的网站时，你会遇到一些问题：

传统开发的挑战：

1. **代码重复** 🔄

- 每个页面都要重复写相同的导航栏

- 页脚在每个文件里都要复制粘贴

- 修改导航栏需要改 10 个文件！

2. **难以维护** 😰

- 网站有 50 个页面，修改一个按钮样式要改 50 次

- 代码散落各处，找 bug 像大海捞针

- 添加新功能需要在多个地方修改

3. **性能问题** 🐌

- 每次点击链接都要重新加载整个页面

- 重复加载相同的 JavaScript 和 CSS

- 用户体验不够流畅

4. **SEO 困难** 🔍

- 动态内容搜索引擎看不到

- 首屏加载慢影响排名

举个例子：

想象你要做一个有 20 个页面的班级网站。用传统方式：

  • 导航栏代码要写 20 遍
  • 修改导航栏的一个按钮，要打开 20 个文件逐个修改
  • 如果忘记改某个文件，网站就不一致了

    • 这就像复制粘贴魔术贴纸，每次都要重复劳动！

    学习资源：

  • [MDN - Web 开发介绍](https://developer.mozilla.org/zh-CN/docs/Learn_web_development)
  • [现代 Web 开发简史](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Getting_started/Web_standards)