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>)
}

原本的範例有點複雜，我們一步一步說明。

Style

我們來試著新增一些內容，首先，用到的是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)

• Writing Markup with JSX
• JavaScript in JSX with Curly Braces

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);
}

套用後，可以看到呈現方式就改變了~~

CSS

在react裡可以使用標準的CSS，這部分應該各位已經在web前端設計中都已經學過了，可以回去複習一下。

• CSS (吳濟聰老師 領科學程行動應用程式設計課程教材)

稍微補充的是: