Next.js是個React框架，採用Next.js的好處是可以進行Static Site Generation (SSG)以及Server Side Rendering (SSR)，讓系統的效能提升。另外，Next.js內建routing，讓我們不需要額外採用React Router。對初學者而言，是最基本的差別。
<aside> 💡
在Next.js 13以後，Next.js的內建routing開始提供App Router，跟過去的routing方式不太一樣。
</aside>
在環境設定的說明中，我們寫了一個很基本的React頁面，我們來說明一下語法，Home是個函數，並且回傳要產生的內容。最前面的export 及default是讓這個元件可以被使用。(詳參:淺談JavaScript ES6的import與import{}及export及export default使用方式 ):
export default function Home() {
return (<div><h1>Hello</h1><h2>我是吳濟聰</h2></div>)
}
原本的範例有點複雜，我們一步一步說明。
我們來試著新增一些內容，首先，用到的是import，也就是引用同一個檔案夾裡的page.module.css，並且將變數名稱設為styles。
import styles from './page.module.css'
這樣，就可以在程式裡面套用styles裡的內容了，以這個範例而言，就是套用main的樣式，因為我們是使用JSX，因為class是javascript的保留字(用來定義類別)，所以不能使用class，而是要改用className來套用樣式。另外，因為要使用到javascript裡的變數，在為什麼要用JS框架，就提到了，在JSX裡，要利用{}來取得變數，做法很像PHP的**<?= >**。(詳參: React篇: HelloWorld解說與JSX語法 、Introducing JSX 、 JSX In Depth)
import styles from './page.module.css'
export default function Home() {
return (<div **className**=**{styles.page}**><h1>Hello</h1><h2>我是吳濟聰</h2></div>)
}
page的樣式可以在page.module.css裡找到:
.page {
--gray-rgb: 0, 0, 0;
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
--button-primary-hover: #383838;
--button-secondary-hover: #f2f2f2;
display: grid;
grid-template-rows: 20px 1fr 20px;
align-items: center;
justify-items: center;
min-height: 100svh;
padding: 80px;
gap: 64px;
font-family: var(--font-geist-sans);
}
套用後，可以看到呈現方式就改變了~~
在react裡可以使用標準的CSS，這部分應該各位已經在web前端設計中都已經學過了，可以回去複習一下。