0 · The stack 1 · The words 2 · The machines 3 · Build it 4 · Free hosting

🟩 Next Steps — Node.js, React and Next.js

You learned nine ideas in the JavaScript Lab. They all ran inside a browser tab. Everything you wrote lived on one page. Now the same language goes to three new places. Node.js runs JavaScript with no web page. React builds a page from small pieces. Next.js puts both halves in one project. 你在 JavaScript 实验室学了九个概念。它们都在浏览器标签页里运行。你写的东西都住在一个页面上。现在同一种语言要去三个新地方。 Node.js 不用网页也能运行 JavaScript。React 用小零件搭页面。 Next.js 把两半放进一个项目。 คุณเรียนเก้าแนวคิดใน JavaScript Lab ทั้งหมดรันในแท็บเบราว์เซอร์ ทุกอย่างที่คุณเขียนอยู่ในหน้าเดียว ตอนนี้ภาษาเดิมไปสามที่ใหม่ Node.js รัน JavaScript โดยไม่มีหน้าเว็บ React สร้างหน้าเว็บจากชิ้นเล็ก ๆ Next.js เอาสองส่วนมาไว้ในโปรเจกต์เดียว

🟨

JavaScript — the language.

Variables, arrays, functions, events. You have this already. The three below do not replace it. They are all written in it.
JavaScript —— 语言本身。变量、数组、函数、事件。你已经会了。下面三样不会取代它。它们都是用它写的。
JavaScript — ตัวภาษา ตัวแปร อาร์เรย์ ฟังก์ชัน อีเวนต์ คุณมีอยู่แล้ว สามอย่างข้างล่างไม่ได้มาแทน ทั้งหมดเขียนด้วยมัน

visit time🐙 On a Pages site: it runs in the visitor's browser. Pages only sends the file. The browser does the work. Your space game needs no changes.
🐙 在 GitHub Pages 上：它在访客的浏览器里运行。 Pages 只负责发文件。工作由浏览器来做。你的太空游戏一行都不用改。
🐙 บนเว็บ GitHub Pages: มันรันในเบราว์เซอร์ของผู้เข้าชม Pages แค่ส่งไฟล์ไป เบราว์เซอร์เป็นคนทำงาน เกมอวกาศของคุณไม่ต้องแก้อะไรเลย

🟩

Node.js — the same language, off the page.

It is a program. It runs a .js file on a computer. No tab. No window. No buttons. Only a terminal. This is how JavaScript reads files. It talks to a database. It answers other computers.
Node.js —— 同一种语言，离开网页。它是一个程序。它在电脑上运行 .js 文件。没有标签页。没有窗口。没有按钮。只有终端。 JavaScript 就是这样读文件、连数据库、回答别的电脑。
Node.js — ภาษาเดิม ออกจากหน้าเว็บ มันคือโปรแกรม มันรันไฟล์ .js บนคอมพิวเตอร์ ไม่มีแท็บ ไม่มีหน้าต่าง ไม่มีปุ่ม มีแค่เทอร์มินัล JavaScript อ่านไฟล์แบบนี้ คุยกับฐานข้อมูล และตอบคอมพิวเตอร์เครื่องอื่น

build only🐙 On a Pages site: it never runs. Pages has no Node. Node runs before Pages. It makes the files. This workflow line is Node: - run: npm run build. It runs on a GitHub computer, not yours.
🐙 在 GitHub Pages 上：它根本不运行。Pages 没有 Node。 Node 在 Pages 之前运行。它负责做出文件。工作流里这一行就是 Node： - run: npm run build。它跑在 GitHub 的电脑上，不是你的。
🐙 บนเว็บ GitHub Pages: มันไม่รันเลย Pages ไม่มี Node Node รันก่อน Pages มันสร้างไฟล์ บรรทัดนี้ใน workflow คือ Node: - run: npm run build มันรันบนคอมพิวเตอร์ของ GitHub ไม่ใช่ของคุณ

⚛️

React — a library. You build the page from components.

You do not write one long file. You write small functions. Each one returns a piece of the page. The data changes. React finds what changed. It paints only that part. React is not a language. It is a box of parts.
React —— 一个库。你用组件搭页面。你不写一个长文件。你写小函数。每个函数返回页面的一块。数据一变，React 找出哪里变了。它只画那一块。 React 不是语言。它是一盒零件。
React — ไลบรารี คุณสร้างหน้าเว็บจากคอมโพเนนต์ คุณไม่เขียนไฟล์ยาวไฟล์เดียว คุณเขียนฟังก์ชันเล็ก ๆ แต่ละอันคืนหน้าเว็บมาชิ้นหนึ่ง ข้อมูลเปลี่ยน React หาว่าอะไรเปลี่ยน แล้ววาดเฉพาะส่วนนั้น React ไม่ใช่ภาษา มันคือกล่องอะไหล่

build + visit🐙 On a Pages site: both halves arrive. <Student name="Nok" /> becomes finished HTML at build time. <Counter /> is sent as JavaScript. It wakes up when the visitor clicks.
🐙 在 GitHub Pages 上：两半都能到。 <Student name="Nok" /> 在构建时变成写好的 HTML。 <Counter /> 以 JavaScript 发出去。访客一点它就醒过来。
🐙 บนเว็บ GitHub Pages: มาถึงทั้งสองส่วน <Student name="Nok" /> กลายเป็น HTML สำเร็จรูปตอน build <Counter /> ถูกส่งไปเป็น JavaScript มันตื่นเมื่อผู้เข้าชมคลิก

▲

Next.js — a framework. It runs React on both sides.

Next.js is React plus a server. Folder names become web addresses. You get a place for server code. One command makes a real website. It runs on Node. It renders React.
Next.js —— 一个框架。它让 React 两边都能跑。 Next.js 就是 React 加服务器。文件夹名字变成网址。你有地方写服务器代码。一个命令做出真网站。它跑在 Node 上。它渲染 React。
Next.js — เฟรมเวิร์ก มันรัน React ทั้งสองฝั่ง Next.js คือ React บวกเซิร์ฟเวอร์ ชื่อโฟลเดอร์กลายเป็นที่อยู่เว็บ คุณมีที่เขียนโค้ดเซิร์ฟเวอร์ คำสั่งเดียวสร้างเว็บไซต์จริง มันรันบน Node มันเรนเดอร์ React

build only🐙 On a Pages site: only the build half runs. npm run build writes the out folder. app/about/page.js becomes out/about.html. Pages serves that file. The Next.js server never starts.
🐙 在 GitHub Pages 上：只有构建那一半会跑。 npm run build 写出 out 文件夹。 app/about/page.js 变成 out/about.html。 Pages 就发这个文件。Next.js 的服务器永远不会启动。
🐙 บนเว็บ GitHub Pages: รันแค่ครึ่งที่เป็น build npm run build เขียนโฟลเดอร์ out app/about/page.js กลายเป็น out/about.html Pages เสิร์ฟไฟล์นั้น เซิร์ฟเวอร์ Next.js ไม่เคยเริ่มทำงาน

Every 🐙 line above says the same thing a different way. Only the browser half runs on GitHub Pages. The rest runs before it. Section 4 has the settings. 上面每一条 🐙 都在用不同说法讲同一件事。在 GitHub Pages 上，只有浏览器那一半会跑。其余的都在它之前跑完。第 4 节有具体设置。 ทุกบรรทัด 🐙 ข้างบนพูดเรื่องเดียวกันคนละแบบ บน GitHub Pages รันแค่ครึ่งที่เป็นเบราว์เซอร์ ที่เหลือรันก่อนหน้านั้น หัวข้อ 4 มีการตั้งค่า

Learn them in that order. Many people meet Next.js first. Then it feels confusing. Next.js expects you to know components. It expects you to know servers. Sometimes Next.js code looks like magic. The missing piece is React or Node.
就按这个顺序学。很多人先遇到 Next.js。然后就觉得难懂。 Next.js 默认你懂组件。它默认你懂服务器。有时 Next.js 的代码看起来像魔法。缺的那块是 React 或 Node。
เรียนตามลำดับนี้ หลายคนเจอ Next.js ก่อน แล้วรู้สึกงง Next.js คาดว่าคุณรู้จักคอมโพเนนต์ มันคาดว่าคุณรู้จักเซิร์ฟเวอร์ บางครั้งโค้ด Next.js ดูเหมือนเวทมนตร์ ชิ้นที่ขาดคือ React หรือ Node

You need one free download. Nothing else. Work in this order. Learn the words. Drive the machines. Then build a real website. 你只需要下载一个免费的东西。别的都不用。按这个顺序做。先学词。再驾驶机器。然后做一个真网站。 คุณต้องดาวน์โหลดของฟรีอย่างเดียว ไม่ต้องอย่างอื่น ทำตามลำดับนี้ เรียนคำศัพท์ ขับเครื่องมือ แล้วสร้างเว็บไซต์จริง

🟨 Not finished with the browser? Go back to the JavaScript Lab first. This page uses all nine ideas from it.
浏览器那部分还没学完？先回 JavaScript 实验室。本页要用到那里的全部九个概念。
ยังไม่จบส่วนเบราว์เซอร์? กลับไปที่ JavaScript Lab ก่อน หน้านี้ใช้ทั้งเก้าแนวคิดจากที่นั่น Back ▸

🔤 The words you need

Summary

Thirty-one words. Each card shows its layer. Node, React or Next. You see these words in every job advert. You see them in every error message. Programmers say them in English everywhere. Tap say it to hear a word. Tap tell me more for a long answer.

摘要

三十一个词。每张卡片标出它属于哪一层：Node、React 还是 Next。这些词出现在每条招聘广告里。也出现在每条错误信息里。全世界的程序员都用英语说它们。点“say it”听一个词。点“tell me more”看详细解释。

สรุป

สามสิบเอ็ดคำ การ์ดแต่ละใบบอกชั้นของมัน Node, React หรือ Next คุณเห็นคำเหล่านี้ในประกาศรับสมัครงานทุกใบ คุณเห็นมันในข้อความ error ทุกอัน โปรแกรมเมอร์พูดเป็นภาษาอังกฤษทุกที่ แตะ say it เพื่อฟังคำหนึ่ง แตะ tell me more เพื่ออ่านคำอธิบายยาว

🔧 Nine little machines

Four Node machines. Three React machines. Two Next.js machines. Each machine shows real code on the left. It shows a result on the right. 四台 Node 机器。三台 React 机器。两台 Next.js 机器。每台机器左边是真代码。右边是结果。 เครื่อง Node สี่เครื่อง React สามเครื่อง Next.js สองเครื่อง แต่ละเครื่องแสดงโค้ดจริงทางซ้าย และผลลัพธ์ทางขวา

There are two kinds of machine here. The page tells you which. A browser tab cannot run Node. That is the point of Node. Machines marked runs here really run in your browser now. Machines marked drawn show real code. They draw a picture of your terminal. Never trust a page that hides this.
这里有两种机器。页面会告诉你是哪一种。浏览器标签页跑不了 Node。这正是 Node 的意义。标着 runs here 的机器现在真的在你的浏览器里跑。标着 drawn 的机器是真代码。它们画出你的终端。不要相信藏起这个差别的页面。
ที่นี่มีเครื่องสองแบบ หน้านี้บอกคุณว่าแบบไหน แท็บเบราว์เซอร์รัน Node ไม่ได้ นั่นคือจุดประสงค์ของ Node เครื่องที่ติดป้าย runs here รันจริงในเบราว์เซอร์คุณตอนนี้ เครื่องที่ติดป้าย drawn แสดงโค้ดจริง มันวาดภาพเทอร์มินัลของคุณ อย่าเชื่อหน้าเว็บที่ซ่อนเรื่องนี้

📟 1 · Node runs a file. The terminal answers.drawn

Summary

Node is a program. You give it a command. You write a file called app dot js. You type node app dot js. Node reads the file. It runs every line. It prints your logs. Then it stops. There is no page. There is no window. The black box is a terminal.

摘要

Node 是一个程序。你给它一条命令。你写一个叫 app.js 的文件。你输入 node app.js。Node 读这个文件。它一行一行地运行。它打印你的日志。然后它停止。没有网页。没有窗口。那个黑框是终端。

สรุป

Node คือโปรแกรม คุณให้คำสั่งกับมัน คุณเขียนไฟล์ชื่อ app.js คุณพิมพ์ node app.js Node อ่านไฟล์ มันรันทุกบรรทัด มันพิมพ์ log ของคุณ แล้วมันหยุด ไม่มีหน้าเว็บ ไม่มีหน้าต่าง กล่องดำคือเทอร์มินัล

app.jsconst os = require("os"); const name = "Chiang Mai"; console.log("Hello from " + name); console.log("I am running on " + os.platform());

name

Why require and not <script>? There is no HTML file here. So there is no place for a script tag. Node asks for code by name. os is a part inside Node already. 为什么用 require，不用 <script>？ 这里没有 HTML 文件。所以没有地方放 script 标签。Node 按名字要代码。 os 是 Node 里已经有的一个零件。 ทำไมใช้ require ไม่ใช่ <script>? ที่นี่ไม่มีไฟล์ HTML จึงไม่มีที่ใส่แท็ก script Node ขอโค้ดด้วยชื่อ os เป็นชิ้นส่วนที่อยู่ใน Node อยู่แล้ว

press a command

📦 2 · npm gets code from other peopledrawn

Summary

A package is code from another person. They give it away for free. npm is the tool that gets it. Every project has a file called package dot json. It lists the packages you need. The list travels with the project. Add a package. Watch the list grow. The download folder is very big. Never put that folder in git.

摘要

包是别人写的代码。他们免费送出来。npm 是把它拿下来的工具。每个项目都有一个 package.json 文件。它列出你需要的包。这份清单跟着项目走。加一个包。看清单变长。下载的文件夹非常大。永远不要把它放进 git。

สรุป

แพ็กเกจคือโค้ดจากคนอื่น เขาแจกฟรี npm คือเครื่องมือที่ไปเอามา ทุกโปรเจกต์มีไฟล์ชื่อ package.json มันลิสต์แพ็กเกจที่คุณต้องใช้ รายการนี้เดินทางไปกับโปรเจกต์ เพิ่มแพ็กเกจ ดูรายการยาวขึ้น โฟลเดอร์ที่โหลดมาใหญ่มาก ห้ามเอาโฟลเดอร์นั้นเข้า git

package.json{ "name": "my-app", "scripts": { "dev": "next dev", "build": "next build" }, "dependencies": {…} }

Why share a file and not a folder? The code folder is hundreds of megabytes. The list is two hundred bytes. You share the list. The next person types npm install. They get the same folder. 为什么共享文件而不是文件夹？代码文件夹有几百 MB。清单只有两百字节。你共享清单。下一个人输入 npm install。他们得到同样的文件夹。 ทำไมแชร์ไฟล์ ไม่ใช่โฟลเดอร์? โฟลเดอร์โค้ดใหญ่หลายร้อยเมกะไบต์ รายการมีแค่สองร้อยไบต์ คุณแชร์รายการ คนต่อไปพิมพ์ npm install เขาได้โฟลเดอร์เดียวกัน

0 dependencies

🧩 3 · export and import join two filesruns here

Summary

One file is too small for a real program. So you use many files. A file with export offers something. A file with import asks for it by name. The two lines must match. The name in export is the name in import. Pick another function. Watch both lines change.

摘要

一个文件装不下真正的程序。所以你要用很多文件。写 export 的文件把东西提供出去。写 import 的文件按名字来要。这两行必须对得上。export 里的名字就是 import 里的名字。换一个函数。看两行一起变。

สรุป

ไฟล์เดียวเล็กเกินไปสำหรับโปรแกรมจริง คุณจึงใช้หลายไฟล์ ไฟล์ที่มี export เสนอของให้ ไฟล์ที่มี import ขอโดยเรียกชื่อ สองบรรทัดต้องตรงกัน ชื่อใน export คือชื่อใน import เลือกฟังก์ชันอื่น ดูสองบรรทัดเปลี่ยน

math.jsexport function double(n){ return n * 2; } export function square(n){ return n * n; } export function half(n){ return n / 2; }

app.jsimport { double } from "./math.js"; console.log(double(6)); // 12

double(6) is 12

Two spellings, one idea. Old Node files use require("./math.js") and module.exports. New files use import and export. Every Next.js file uses the new way. You will see both. They do the same job. 两种写法，一个意思。老的 Node 文件用 require("./math.js") 和 module.exports。新文件用 import 和 export。所有 Next.js 文件都用新写法。两种你都会见到。它们做同样的事。 สองแบบ แนวคิดเดียว ไฟล์ Node เก่าใช้ require("./math.js") และ module.exports ไฟล์ใหม่ใช้ import และ export ไฟล์ Next.js ทุกไฟล์ใช้แบบใหม่ คุณจะเห็นทั้งสองแบบ ทั้งคู่ทำงานเดียวกัน

🖥️ 4 · A server waits, then answersdrawn

Summary

A server is a program. It never finishes. It sits on a port and waits. A browser sends a request. The request has a path on it. Your function looks at the path. It sends a response back. That is the shape of the whole web. Type a path. Press send. Watch one request make the trip.

摘要

服务器是一个程序。它永远不结束。它守在一个端口上等着。浏览器发来一个请求。请求上有一个路径。你的函数看这个路径。它把响应发回去。整个网络就是这个形状。输入一个路径。按发送。看一次请求跑一趟。

สรุป

เซิร์ฟเวอร์คือโปรแกรม มันไม่จบ มันนั่งบนพอร์ตแล้วรอ เบราว์เซอร์ส่ง request มา request มีพาธติดมาด้วย ฟังก์ชันของคุณดูพาธ แล้วส่ง response กลับไป นั่นคือรูปร่างของเว็บทั้งหมด พิมพ์พาธ กดส่ง ดู request เดินทางหนึ่งรอบ

server.jsconst http = require("http"); http.createServer((req, res) => { if (req.url === "/") res.end("Hello"); else if (req.url === "/time") res.end(String(new Date())); else { res.statusCode = 404; res.end("Not found"); } }).listen(3000); // waiting on http://localhost:3000

GET

What is a port? One computer runs many programs. The port number is the door. 3000 is only a habit. The web uses door 80. Secure web uses door 443. 端口是什么？一台电脑跑很多程序。端口号就是门。 3000 只是习惯。网页用 80 号门。加密网页用 443。 พอร์ตคืออะไร? คอมพิวเตอร์เครื่องเดียวรันหลายโปรแกรม เลขพอร์ตคือประตู 3000 เป็นแค่ความเคยชิน เว็บใช้ประตู 80 เว็บที่เข้ารหัสใช้ 443

the server is listening on port 3000

⏳ 5 · async and await let the program waitruns here

Summary

Some jobs take time. Reading a file takes time. Asking another computer takes time. JavaScript does not stand and wait. It writes a promise. It goes to the next line. It comes back when the answer arrives. The word await means stop here. Press run. Watch the lines print out of order.

摘要

有些活儿要花时间。读文件要时间。问别的电脑要时间。JavaScript 不会站着等。它写下一个承诺。它去做下一行。答案到了它再回来。await 的意思是“在这里停住”。按运行。看这些行不按顺序打印。

สรุป

งานบางอย่างใช้เวลา อ่านไฟล์ใช้เวลา ถามคอมพิวเตอร์เครื่องอื่นใช้เวลา JavaScript ไม่ยืนรอ มันเขียนสัญญาไว้ มันไปบรรทัดถัดไป พอคำตอบมาถึงมันกลับมา คำว่า await แปลว่าหยุดตรงนี้ กดรัน ดูบรรทัดพิมพ์ไม่เรียงลำดับ

weather.jsasync function getTemp(){ console.log("2 · asking…"); const res = await fetch("/api/temp"); // takes 900 ms const data = await res.json(); console.log("4 · it is " + data.c + "°C"); } console.log("1 · start"); getTemp(); console.log("3 · I did not wait!");

delay

Read the numbers, not the lines. Line 3 prints before line 4. This is not a bug. A Node server can answer a hundred people. One slow database query does not stop the rest. 看数字，不看行的位置。第 3 行比第 4 行先打印。这不是 bug。一台 Node 服务器能同时回应一百个人。一个慢查询不会挡住其他人。 ดูตัวเลข ไม่ใช่ตำแหน่งบรรทัด บรรทัด 3 พิมพ์ก่อนบรรทัด 4 นี่ไม่ใช่บั๊ก เซิร์ฟเวอร์ Node ตอบคนร้อยคนได้ คำสั่งฐานข้อมูลช้าหนึ่งอันไม่หยุดคนอื่น

press run

⚛️ 6 · A component is a functionruns here

Summary

This is the whole idea of React. A component is a normal function. It takes props. Props are the facts it needs. It returns a piece of page. You write it once. You use it many times with different props. The strange HTML inside is called JSX. JSX is not a new language. It is a short way to write tags.

摘要

这就是 React 的全部思想。组件是一个普通函数。它接收 props。props 就是它需要的事实。它返回页面的一块。你写一次。你用不同的 props 用很多次。里面那些奇怪的 HTML 叫 JSX。JSX 不是新语言。它只是写标签的简写。

สรุป

นี่คือแนวคิดทั้งหมดของ React คอมโพเนนต์คือฟังก์ชันธรรมดา มันรับ props props คือข้อมูลที่มันต้องใช้ มันคืนหน้าเว็บมาชิ้นหนึ่ง คุณเขียนครั้งเดียว คุณใช้หลายครั้งด้วย props ต่างกัน HTML แปลก ๆ ข้างในเรียกว่า JSX JSX ไม่ใช่ภาษาใหม่ มันคือทางลัดในการเขียนแท็ก

Student.jsexport default function Student({ name, city }) { return ( <div> <h4>Hello, {name}!</h4> <p>You are learning in {city}.</p> </div> ); }

page.js<Student name="Nok" city="Chiang Mai" />

name city

Always a capital letter. <div> is a real HTML tag. <Student> is your component. React looks at the first letter. A small letter does nothing at all. 永远用大写开头。<div> 是真的 HTML 标签。 <Student> 是你的组件。React 看第一个字母。小写开头什么都不会发生。 ขึ้นต้นด้วยตัวใหญ่เสมอ <div> คือแท็ก HTML จริง <Student> คือคอมโพเนนต์ของคุณ React ดูตัวอักษรแรก ตัวเล็กจะไม่เกิดอะไรเลย

one component, two props

🔄 7 · State runs your function againruns here

Summary

In the JavaScript Lab you changed the page by hand. React does not work that way. You change a piece of state. React runs your function again. It compares the new piece with the old piece. It paints only the difference. Press the button. Watch the render counter. useState is a hook. Hooks only work in client components.

摘要

在 JavaScript 实验室里，你自己动手改页面。React 不是这样。你改一个 state。React 把你的函数再跑一遍。它把新的一块和旧的一块比一比。它只画不一样的地方。按按钮。看渲染次数。useState 是一个 hook。hook 只能在客户端组件里用。

สรุป

ใน JavaScript Lab คุณแก้หน้าเว็บเองด้วยมือ React ไม่ได้ทำแบบนั้น คุณเปลี่ยน state หนึ่งชิ้น React รันฟังก์ชันของคุณใหม่ มันเทียบชิ้นใหม่กับชิ้นเก่า มันวาดเฉพาะส่วนที่ต่าง กดปุ่ม ดูตัวนับ render useState คือ hook hook ใช้ได้เฉพาะใน client component

Counter.js"use client"; import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); // now: 0 return ( <button onClick={() => setCount(count + 1)}> Clicked {count} times </button> ); }

Never write count = count + 1. That line does nothing. React does not watch the variable. It watches setCount. Call the setter. If you do not, the page will not move. 永远不要写 count = count + 1。那一行什么都不做。 React 不看那个变量。它看 setCount。要调用 setter。不调用，页面就不动。 อย่าเขียน count = count + 1 บรรทัดนั้นไม่ทำอะไร React ไม่ได้ดูตัวแปรนั้น มันดู setCount ต้องเรียก setter ถ้าไม่เรียก หน้าเว็บจะไม่ขยับ

count is 0 · 1 render

🔀 8 · The folder name is the addressruns here

Summary

In plain Node you write the routing. You use if and else. Next.js reads your folders instead. A folder inside app becomes part of the address. A file called page dot js becomes the page. A file called route dot js becomes an API. Click a file. See the address it makes. Or type your own folder name.

摘要

在纯 Node 里，路由要你自己写。你用 if 和 else。Next.js 改成读你的文件夹。app 里的一个文件夹变成网址的一部分。叫 page.js 的文件变成页面。叫 route.js 的文件变成一个 API。点一个文件。看它做出的网址。或者输入你自己的文件夹名字。

สรุป

ใน Node ล้วน คุณเขียน routing เอง คุณใช้ if กับ else Next.js อ่านโฟลเดอร์ของคุณแทน โฟลเดอร์ใน app กลายเป็นส่วนหนึ่งของที่อยู่ ไฟล์ชื่อ page.js กลายเป็นหน้าเว็บ ไฟล์ชื่อ route.js กลายเป็น API คลิกไฟล์ ดูที่อยู่ที่มันสร้าง หรือพิมพ์ชื่อโฟลเดอร์ของคุณเอง

your projectapp/ page.js → / about/page.js → /about lessons/page.js → /lessons lessons/[id]/page.js → /lessons/anything api/temp/route.js → /api/temp (not a page)

app/ /page.js

Square brackets mean anything. [id] is not a folder called id. It matches any word there. Then it gives you the word. One file can serve ten thousand pages. 方括号表示“任意”。[id] 不是一个叫 id 的文件夹。它匹配那里的任何词。然后把那个词给你。一个文件能服务一万个页面。 วงเล็บเหลี่ยมแปลว่าอะไรก็ได้ [id] ไม่ใช่โฟลเดอร์ชื่อ id มันแมตช์คำใดก็ได้ตรงนั้น แล้วส่งคำนั้นให้คุณ ไฟล์เดียวเสิร์ฟได้หมื่นหน้า

app/about/page.js → /about

🌐 9 · Two computers, one projectdrawn

Summary

This one idea makes Next.js hard. So go slowly. Every component runs on the server. You can change that. Write use client at the top of the file. Server components can read a database. They can keep a secret key. They cannot use useState. They cannot hear a click. Client components can do both. But their code goes to the visitor. Flip the switch. Read the two lists.

摘要

这一个概念让 Next.js 变难。所以慢慢来。每个组件都在服务器上运行。你可以改变这一点。在文件最上面写 use client。服务器组件能读数据库。它们能保存密钥。它们不能用 useState。它们听不到点击。客户端组件两样都能做。但它们的代码会发给访问者。拨一下开关。读那两张清单。

สรุป

แนวคิดเดียวนี้ทำให้ Next.js ยาก ค่อย ๆ ไป ทุกคอมโพเนนต์รันบนเซิร์ฟเวอร์ คุณเปลี่ยนได้ เขียน use client บนสุดของไฟล์ Server component อ่านฐานข้อมูลได้ เก็บกุญแจลับได้ ใช้ useState ไม่ได้ ได้ยินการคลิกไม่ได้ Client component ทำได้ทั้งสองอย่าง แต่โค้ดของมันไปหาผู้เข้าชม สลับสวิตช์ อ่านสองรายการ

app/page.js export default async function Page() { const rows = await db.query("select * from lessons"); return <Lessons rows={rows} />; }

The safe start is the server. Next.js starts every file on the server. Add use client to a small piece only. A button needs it. A form needs it. A menu needs it. A whole page does not. 安全的起点是服务器。Next.js 让每个文件都从服务器开始。只给一小块加 use client。按钮需要它。表单需要它。菜单需要它。整个页面不需要。 จุดเริ่มที่ปลอดภัยคือเซิร์ฟเวอร์ Next.js เริ่มทุกไฟล์ที่เซิร์ฟเวอร์ ใส่ use client เฉพาะชิ้นเล็ก ๆ ปุ่มต้องใช้ ฟอร์มต้องใช้ เมนูต้องใช้ ทั้งหน้าไม่ต้อง

server component — runs on your computer, never on theirs

🚀 Build it on your own computer

Summary

Nine steps. You start with nothing. You finish with a website on the internet. Every command has a copy button. Do them in order. Do not skip step zero. Step two takes a few minutes on slow internet. That is normal. At the end you get an address. You can send it to your family.

摘要

九步。你从零开始。最后得到一个在互联网上的网站。每条命令都有复制按钮。按顺序做。不要跳过第 0 步。网速慢的话第 2 步要几分钟。这很正常。最后你会得到一个网址。你可以发给家里人。

สรุป

เก้าขั้นตอน คุณเริ่มจากศูนย์ คุณจบด้วยเว็บไซต์บนอินเทอร์เน็ต ทุกคำสั่งมีปุ่มคัดลอก ทำตามลำดับ อย่าข้ามขั้นตอนศูนย์ ขั้นตอนสองใช้เวลาไม่กี่นาทีถ้าเน็ตช้า นั่นปกติ ตอนจบคุณได้ที่อยู่เว็บ คุณส่งให้ครอบครัวได้

0 Install Node.js

Go to nodejs.org. Download the version marked LTS. LTS means long term support. It is the boring, safe one. Install it. Then close your terminal. Open a new one. People forget the new terminal.
去 nodejs.org。下载标着 LTS 的版本。LTS 是长期支持版。它是无聊但安全的那个。装好它。然后关掉终端。开一个新的。大家都会忘记开新终端。
ไปที่ nodejs.org ดาวน์โหลดเวอร์ชันที่เขียนว่า LTS LTS แปลว่ารองรับระยะยาว มันคือตัวที่น่าเบื่อแต่ปลอดภัย ติดตั้งมัน แล้วปิดเทอร์มินัล เปิดอันใหม่ คนมักลืมเปิดเทอร์มินัลใหม่

node -v npm -v

Two version numbers means it works. Do you see command not found? Then the install did not finish. Or you are still in the old terminal. 出现两个版本号就是成功了。看到 command not found 吗？那就是没装完。或者你还在旧终端里。 ถ้าขึ้นเลขเวอร์ชันสองอัน แปลว่าใช้ได้ เห็น command not found ไหม? แปลว่าติดตั้งไม่จบ หรือคุณยังอยู่ในเทอร์มินัลเดิม

1 Make the project

One command builds the whole folder. It asks a few questions. Press Enter for every one. Later you will know what they mean.
一条命令建好整个文件夹。它会问几个问题。每个都按回车。以后你就知道它们的意思了。
คำสั่งเดียวสร้างโฟลเดอร์ทั้งหมด มันถามไม่กี่ข้อ กด Enter ทุกข้อ ทีหลังคุณจะรู้ว่ามันหมายถึงอะไร

npx create-next-app@latest my-app

npx, not npm. npm install keeps a package. npx borrows it for one command. Then it throws it away. You need this tool once. So you borrow it. 是 npx，不是 npm。npm install 把包留下来。 npx 借来用一条命令。然后扔掉。这个工具你只用一次。所以借就行。 npx ไม่ใช่ npm npm install เก็บแพ็กเกจไว้ npx ยืมมาใช้คำสั่งเดียว แล้วทิ้ง คุณใช้เครื่องมือนี้ครั้งเดียว จึงยืมพอ

2 Start it and look at it

cd my-app npm run dev

Open http://localhost:3000 in your browser. localhost means this computer. Nobody on the internet can see it yet. Leave this terminal running. It is your server. Press Ctrl+C to stop it.
在浏览器打开 http://localhost:3000。localhost 的意思是这台电脑。互联网上还没人能看到。让这个终端开着。它就是你的服务器。按 Ctrl+C 停止。
เปิด http://localhost:3000 ในเบราว์เซอร์ localhost แปลว่าเครื่องนี้ ยังไม่มีใครบนอินเทอร์เน็ตเห็น ปล่อยเทอร์มินัลนี้ไว้ มันคือเซิร์ฟเวอร์ของคุณ กด Ctrl+C เพื่อหยุด

3 Change the front page

Open app/page.js. Delete everything in it. Paste this in. Save the file. Now look at the browser. Do not press reload. It changed already.
打开 app/page.js。把里面全删掉。粘贴这段。保存文件。现在看浏览器。不要按刷新。它已经变了。
เปิด app/page.js ลบทุกอย่างข้างใน วางโค้ดนี้ บันทึกไฟล์ แล้วดูเบราว์เซอร์ อย่ากดรีโหลด มันเปลี่ยนไปแล้ว

app/page.jsexport default function Home() { return ( <main style={{ padding: 40 }}> <h1>Krueng AI</h1> <p>Made in Chiang Mai.</p> </main> ); }

4 Add a second page

Make a folder app/about. Put a file page.js inside it. You wrote no routing code. Now http://localhost:3000/about works.
建一个文件夹 app/about。在里面放一个 page.js。你没写一行路由代码。现在 http://localhost:3000/about 就能用了。
สร้างโฟลเดอร์ app/about ใส่ไฟล์ page.js ข้างใน คุณไม่ได้เขียนโค้ด routing เลย ตอนนี้ http://localhost:3000/about ใช้ได้แล้ว

app/about/page.jsexport default function About() { return <h1>About this school</h1>; }

5 Add a component and use it twice

Make a folder app/components. Put this file in it. One function, two different results. This is machine 6 in a real project.
建一个 app/components 文件夹。把这个文件放进去。一个函数，两个不同的结果。这就是第 6 台机器在真项目里的样子。
สร้างโฟลเดอร์ app/components ใส่ไฟล์นี้ลงไป ฟังก์ชันเดียว ผลลัพธ์สองแบบ นี่คือเครื่องที่ 6 ในโปรเจกต์จริง

app/components/Student.jsexport default function Student({ name, city }) { return ( <div> <h4>Hello, {name}!</h4> <p>You are learning in {city}.</p> </div> ); }

Then use it in app/page.js: 然后在 app/page.js 里用它： แล้วใช้มันใน app/page.js:

import Student from "./components/Student"; // ...inside the return: <Student name="Nok" city="Chiang Mai" /> <Student name="Somchai" city="Lampang" />

6 Add a button that remembers

This one needs state. So it must be a client component. Leave off the first line. Next.js shows you an error. The error tells you why. That error is a good teacher.
这个需要 state。所以它必须是客户端组件。试试不写第一行。 Next.js 会给你一条错误。错误会告诉你为什么。那条错误是个好老师。
อันนี้ต้องใช้ state มันจึงต้องเป็น client component ลองไม่ใส่บรรทัดแรก Next.js จะขึ้น error error บอกคุณว่าทำไม error นั้นเป็นครูที่ดี

app/components/Counter.js"use client"; import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Clicked {count} times </button> ); }

7 Add an API and call it

A file called route.js is not a page. It is an address. It answers with data, not HTML. This is the Node half of your project.
叫 route.js 的文件不是页面。它是一个网址。它用数据回答，不用 HTML。这是你项目里 Node 的那一半。
ไฟล์ชื่อ route.js ไม่ใช่หน้าเว็บ มันคือที่อยู่ มันตอบด้วยข้อมูล ไม่ใช่ HTML นี่คือส่วน Node ของโปรเจกต์คุณ

app/api/temp/route.jsexport async function GET() { return Response.json({ city: "Chiang Mai", c: 32 }); }

Visit http://localhost:3000/api/temp. You see JSON in the browser. Now read it from a server component. You need no useEffect. You need no loading spinner. You only need await: 访问 http://localhost:3000/api/temp。浏览器里能看到 JSON。现在从服务器组件读它。不需要 useEffect。不需要加载动画。只需要 await： เข้า http://localhost:3000/api/temp คุณเห็น JSON ในเบราว์เซอร์ ทีนี้อ่านมันจาก server component ไม่ต้องใช้ useEffect ไม่ต้องมีวงหมุนรอโหลด ใช้แค่ await:

app/weather/page.jsexport default async function Weather() { const res = await fetch("http://localhost:3000/api/temp", { cache: "no-store" }); const data = await res.json(); return <p>{data.city} is {data.c}°C</p>; }

Do you want more about APIs? The APIs lesson covers requests, responses and JSON. 想更多了解 API 吗？API 课讲请求、响应和 JSON。 อยากรู้เรื่อง API เพิ่มไหม? บทเรียน API อธิบาย request, response และ JSON

8 Build it

npm run dev is for you. It is slow on purpose. It reloads on every save. npm run build makes the fast version. Visitors get that one. Always build before you deploy. Build finds mistakes. Dev mode forgives them.
npm run dev 是给你用的。它故意做得慢。它每次保存都重新加载。 npm run build 做出快的版本。访客拿到的是那个。部署前一定先 build。 build 会找出错误。dev 模式会放过它们。
npm run dev มีไว้ให้คุณ มันช้าโดยตั้งใจ มันรีโหลดทุกครั้งที่บันทึก npm run build สร้างเวอร์ชันเร็ว ผู้เข้าชมได้อันนั้น build ก่อน deploy เสมอ build หาข้อผิดพลาดเจอ โหมด dev ปล่อยผ่าน

npm run build npm start

9 Put it on the internet

Push the project to GitHub. Then go to vercel.com. Sign in with GitHub. Import the repository. Vercel made Next.js. So it needs no settings from you. Wait about one minute. You get a real address.
把项目推到 GitHub。然后去 vercel.com。用 GitHub 登录。导入仓库。 Vercel 就是 Next.js 的作者。所以不需要你做设置。等大约一分钟。你就有一个真网址了。
push โปรเจกต์ขึ้น GitHub แล้วไปที่ vercel.com ล็อกอินด้วย GitHub import repository Vercel เป็นคนทำ Next.js จึงไม่ต้องตั้งค่าอะไร รอประมาณหนึ่งนาที คุณได้ที่อยู่จริง

git init git add . git commit -m "my first Next.js site"

Never commit node_modules or .env. create-next-app already wrote a .gitignore. It keeps both out. Do not delete it. Robots look for secret keys on GitHub. They find them in minutes.
永远不要提交 node_modules 或 .env。 create-next-app 已经写好了 .gitignore。它把这两样挡住。不要删它。机器人在 GitHub 上找密钥。几分钟就能找到。
ห้าม commit node_modules หรือ .env create-next-app เขียน .gitignore ไว้แล้ว มันกันทั้งสองอย่าง อย่าลบทิ้ง บอทหากุญแจลับบน GitHub มันเจอในไม่กี่นาที

New to git? Start with the GitHub lesson. Then come back to this step. 还不会 git？先看 GitHub 课。然后回到这一步。 ยังไม่เคยใช้ git? เริ่มที่ บทเรียน GitHub แล้วกลับมาขั้นตอนนี้

Vercel is not the only way. GitHub can host it free. But GitHub Pages runs no server. Read the next section first. Vercel 不是唯一的办法。GitHub 也能免费帮你托管。但 GitHub Pages 不跑服务器。先读下一节。 Vercel ไม่ใช่ทางเดียว GitHub ก็โฮสต์ฟรีได้ แต่ GitHub Pages ไม่รันเซิร์ฟเวอร์ อ่านหัวข้อถัดไป ก่อน

👾 Bring your old project in. Take the space game from the JavaScript Lab. Put it inside a Next.js page. Make it a client component. Same code, new home. This is the fastest way to feel the difference.
把你的老项目搬进来。拿 JavaScript 实验室里的太空游戏。放进一个 Next.js 页面。做成客户端组件。同样的代码，新的家。这是感受差别最快的办法。
เอาโปรเจกต์เก่ามาด้วย เอาเกมอวกาศจาก JavaScript Lab ใส่ในหน้า Next.js ทำให้เป็น client component โค้ดเดิม บ้านใหม่ นี่คือวิธีที่เร็วที่สุดในการรู้สึกถึงความต่าง Open ▸

🐙 Free hosting on GitHub Pages

Summary

GitHub Pages is free hosting. It only serves files. It runs no Node. So your pages still work. Your API routes do not. You change three settings. You add one empty file. Then GitHub builds the site for you. Click a feature below. See if it works there.

摘要

GitHub Pages 是免费托管。它只提供文件。它不跑 Node。所以你的页面还能用。你的 API 路由不能用。你要改三个设置。你要加一个空文件。然后 GitHub 帮你构建网站。点下面一个功能。看看它在那里能不能用。

สรุป

GitHub Pages คือโฮสต์ฟรี มันเสิร์ฟแค่ไฟล์ มันไม่รัน Node หน้าของคุณยังใช้ได้ แต่ API route ใช้ไม่ได้ คุณเปลี่ยนสามค่า คุณเพิ่มไฟล์เปล่าหนึ่งไฟล์ แล้ว GitHub จะบิลด์เว็บให้คุณ คลิกฟีเจอร์ข้างล่าง ดูว่ามันใช้ได้ไหม

Vercel runs your project on a server. GitHub Pages does not. Pages is a shelf for finished files. Node still builds those files. It builds them on your computer. Or it builds them on GitHub. Then Pages hands them out. Vercel 在服务器上跑你的项目。GitHub Pages 不是。 Pages 是一个放成品文件的架子。Node 依然负责做出这些文件。在你的电脑上做。或者在 GitHub 上做。然后 Pages 把它们发出去。 Vercel รันโปรเจกต์คุณบนเซิร์ฟเวอร์ GitHub Pages ไม่ทำ Pages คือชั้นวางไฟล์ที่เสร็จแล้ว Node ยังเป็นคนสร้างไฟล์เหล่านั้น สร้างบนคอมคุณ หรือสร้างบน GitHub แล้ว Pages ก็แจกมันออกไป

A Tell Next.js to make files, not a server

Make a file called next.config.js. Put this in it.
建一个叫 next.config.js 的文件。把这段放进去。
สร้างไฟล์ชื่อ next.config.js ใส่โค้ดนี้ลงไป

next.config.jsconst repo = "my-app"; module.exports = { output: "export", // write plain files basePath: "/" + repo, // the site lives in a folder assetPrefix: "/" + repo + "/", images: { unoptimized: true } // no image server };

output: "export" makes plain files. Your site will live at username.github.io/my-app. That folder name is the basePath. Forget it and every link breaks.
output: "export" 让它生成普通文件。你的网站会在 username.github.io/my-app。那个文件夹名字就是 basePath。忘了它，所有链接都会断。
output: "export" ทำให้ได้ไฟล์ธรรมดา เว็บคุณจะอยู่ที่ username.github.io/my-app ชื่อโฟลเดอร์นั้นคือ basePath ลืมมัน ลิงก์จะพังหมด

B Add the empty file that saves you

This is the most common Pages bug. Pages runs an old tool called Jekyll. Jekyll hides every folder that starts with _. Next.js puts everything in _next. So your page loads with no colours and no buttons. One empty file called .nojekyll stops this.
这是 Pages 最常见的 bug。Pages 会跑一个叫 Jekyll 的老工具。 Jekyll 会藏起所有以 _ 开头的文件夹。Next.js 把东西都放在 _next 里。所以你的页面打开后没有颜色，也没有按钮。一个叫 .nojekyll 的空文件能阻止这个。
นี่คือบักที่เจอบ่อยที่สุดของ Pages Pages รันเครื่องมือเก่าชื่อ Jekyll Jekyll ซ่อนทุกโฟลเดอร์ที่ขึ้นต้นด้วย _ Next.js เก็บทุกอย่างใน _next หน้าคุณจึงโหลดมาไม่มีสีและไม่มีปุ่ม ไฟล์เปล่าชื่อ .nojekyll หยุดเรื่องนี้ได้

C Let GitHub build it for you

You do not upload files by hand. You push your code. GitHub runs npm run build for you. Then it puts the files on Pages. Save this file. Then open Settings, then Pages. Set Source to GitHub Actions.
你不用手动上传文件。你只推代码。 GitHub 帮你跑 npm run build。然后把文件放到 Pages 上。保存这个文件。然后打开 Settings，再点 Pages。把 Source 设为 GitHub Actions。
คุณไม่ต้องอัปโหลดไฟล์เอง คุณแค่ push โค้ด GitHub รัน npm run build ให้ แล้วเอาไฟล์ไปไว้ที่ Pages บันทึกไฟล์นี้ แล้วเปิด Settings แล้ว Pages ตั้ง Source เป็น GitHub Actions

.github/workflows/deploy.ymlname: Deploy to GitHub Pages on: push: branches: [main] permissions: contents: read pages: write id-token: write jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 - run: npm ci - run: npm run build - run: touch out/.nojekyll - uses: actions/upload-pages-artifact@v3 with: path: out deploy: needs: build runs-on: ubuntu-latest environment: name: github-pages steps: - uses: actions/deploy-pages@v4

Read the log when it fails. Open the Actions tab on GitHub. Click the red run. The build ran on their computer, not yours. So the error is the same error you would see at home. 失败时去读日志。在 GitHub 上打开 Actions 标签。点那个红色的运行。构建是在他们的电脑上跑的，不是你的。所以报错和你在家看到的一样。 เวลาพัง ให้อ่าน log เปิดแท็บ Actions บน GitHub คลิกที่รอบสีแดง การ build รันบนเครื่องเขา ไม่ใช่ของคุณ error จึงเหมือนที่คุณเห็นที่บ้าน

D What still works, and what stops

Click a file or a feature. The box tells you the answer. This is machine 9 again. No server means no server code.
点一个文件或功能。右边的框会告诉你答案。这又是第 9 台机器。没有服务器，就没有服务器代码。
คลิกไฟล์หรือฟีเจอร์ กล่องจะบอกคำตอบ นี่คือเครื่องที่ 9 อีกครั้ง ไม่มีเซิร์ฟเวอร์ ก็ไม่มีโค้ดเซิร์ฟเวอร์

pick one

E Plain React works too

No Next.js? Vite is the normal way to build React. It needs the same folder name. Vite builds to dist, not out. Change that one word in the workflow.
不用 Next.js？Vite 是做 React 项目的常见工具。它也需要同样的文件夹名字。Vite 构建到 dist，不是 out。在工作流里改那一个词就行。
ไม่ใช้ Next.js? Vite คือวิธีปกติในการสร้าง React มันต้องใช้ชื่อโฟลเดอร์เดียวกัน Vite บิลด์ไปที่ dist ไม่ใช่ out เปลี่ยนคำนั้นคำเดียวใน workflow

vite.config.jsexport default { base: "/my-app/" // the same folder name };

F So which host do I pick?

Pick GitHub Pages when the site is only pages. A portfolio. A lesson. A game. It is free for ever and it never sleeps. 当网站只有页面时，选 GitHub Pages。作品集。课程。游戏。它永远免费，也不会休眠。 เลือก GitHub Pages เมื่อเว็บมีแค่หน้า พอร์ตโฟลิโอ บทเรียน เกม มันฟรีตลอดไป และไม่หลับ
Pick Vercel when you need a server. An API route. A database. A secret key. The free tier is enough to learn on. 当你需要服务器时，选 Vercel。API 路由。数据库。密钥。免费额度够学习用了。 เลือก Vercel เมื่อคุณต้องใช้เซิร์ฟเวอร์ API route ฐานข้อมูล กุญแจลับ แพ็กเกจฟรีก็พอสำหรับเรียน
You can use both. Put the pages on GitHub Pages. Put one API somewhere else. The browser can call any public address. 两个一起用也行。页面放 GitHub Pages。API 放别处。浏览器可以请求任何公开地址。 ใช้ทั้งสองก็ได้ เอาหน้าไว้ที่ GitHub Pages เอา API ไว้ที่อื่น เบราว์เซอร์เรียกที่อยู่สาธารณะไหนก็ได้

The krueng.ai site you are reading is static too. No Node runs here. It is only files. 你正在看的 krueng.ai 也是静态的。这里没有 Node 在跑。只有文件。 เว็บ krueng.ai ที่คุณอ่านอยู่ก็เป็นสเตติก ที่นี่ไม่มี Node รัน มีแต่ไฟล์

📌 Points to remember

Node is not a new language. It is the same JavaScript. It runs with no page. Node 不是新语言。它就是同一种 JavaScript。它不用网页就能运行。 Node ไม่ใช่ภาษาใหม่ มันคือ JavaScript เดิม มันรันโดยไม่มีหน้าเว็บ
npm brings code from other people. package.json is the list. node_modules is the pile. Share the list. Never share the pile. npm 把别人的代码拿来。package.json 是清单。 node_modules 是那一堆。共享清单。永远不共享那一堆。 npm เอาโค้ดจากคนอื่นมา package.json คือรายการ node_modules คือกอง แชร์รายการ อย่าแชร์กอง
A component is a function. It returns a piece of page. Always start the name with a capital letter. 组件是一个函数。它返回页面的一块。名字永远用大写开头。 คอมโพเนนต์คือฟังก์ชัน มันคืนหน้าเว็บมาชิ้นหนึ่ง ขึ้นต้นชื่อด้วยตัวใหญ่เสมอ
Props come in. State stays inside. A parent gives props to a component. State belongs to the component. Change it and the function runs again. props 从外面进来。state 留在里面。父组件给 props。state 属于组件自己。改了它，函数就再跑一遍。 props เข้ามา state อยู่ข้างใน คอมโพเนนต์แม่ให้ props state เป็นของคอมโพเนนต์เอง เปลี่ยนมันแล้วฟังก์ชันรันใหม่
Never change state by hand. count = count + 1 does nothing. Call setCount. 永远不要手动改 state。count = count + 1 什么都不做。要调用 setCount。 อย่าเปลี่ยน state ด้วยมือ count = count + 1 ไม่ทำอะไร ต้องเรียก setCount
In Next.js the folder is the address. app/about/page.js is /about. You write no routing code. 在 Next.js 里，文件夹就是网址。app/about/page.js 就是 /about。你不用写路由代码。 ใน Next.js โฟลเดอร์คือที่อยู่ app/about/page.js คือ /about คุณไม่ต้องเขียนโค้ด routing
Server first. Client when you need it. Add "use client" to the smallest piece. That piece needs a click or a state. 先用服务器。需要时才用客户端。给最小的一块加 "use client"。那一块需要点击或 state。 เซิร์ฟเวอร์ก่อน ใช้ client เมื่อจำเป็น ใส่ "use client" ให้ชิ้นที่เล็กที่สุด ชิ้นนั้นต้องการการคลิกหรือ state
GitHub Pages serves files. It runs no Node. So pages work there. API routes do not. Set output: "export" and add .nojekyll. GitHub Pages 只提供文件。它不跑 Node。所以页面能用。API 路由不能用。设 output: "export"，并加上 .nojekyll。 GitHub Pages เสิร์ฟแค่ไฟล์ มันไม่รัน Node หน้าจึงใช้ได้ API route ใช้ไม่ได้ ตั้ง output: "export" และเพิ่ม .nojekyll
Read the error message to the end. Node and Next.js errors are long. The first sentence usually helps. The file paths below it usually do not. 把错误信息读到底。Node 和 Next.js 的报错很长。第一句通常有用。下面那些文件路径通常没用。 อ่าน error ให้จบ error ของ Node และ Next.js ยาว ประโยคแรกมักช่วยได้ พาธไฟล์ข้างล่างมักไม่ช่วย

Thank you for learning with us today. Build one small thing. Put it on the internet. Send the address to somebody. See you in the next lab. 感谢今天和我们一起学习。做一个小东西。把它放到互联网上。把网址发给一个人。下个实验室见。 ขอบคุณที่เรียนกับเราวันนี้ สร้างของเล็ก ๆ หนึ่งอย่าง เอาขึ้นอินเทอร์เน็ต ส่งที่อยู่ให้ใครสักคน แล้วเจอกันในแล็บหน้า

🟩 Next Steps — Node.js, React and Next.js

🔤 The words you need

🎤 Speaking drill

🔧 Nine little machines

📟 1 · Node runs a file. The terminal answers.drawn

📦 2 · npm gets code from other peopledrawn

🧩 3 · export and import join two filesruns here

🖥️ 4 · A server waits, then answersdrawn

⏳ 5 · async and await let the program waitruns here

⚛️ 6 · A component is a functionruns here

🔄 7 · State runs your function againruns here

🔀 8 · The folder name is the addressruns here

🌐 9 · Two computers, one projectdrawn

🚀 Build it on your own computer

0 Install Node.js

1 Make the project

2 Start it and look at it

3 Change the front page

4 Add a second page

5 Add a component and use it twice

6 Add a button that remembers

7 Add an API and call it

8 Build it

9 Put it on the internet

🐙 Free hosting on GitHub Pages

A Tell Next.js to make files, not a server

B Add the empty file that saves you

C Let GitHub build it for you

D What still works, and what stops

E Plain React works too

F So which host do I pick?

📌 Points to remember