---
# System prepended metadata

title: Next.js 官方文件整理
tags: [Next.js]

---

Next.js 官方文件整理
=================
###### tags: `Next.js`


創建程式
------
(node.js記得升級)：
```
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
```
> 在這指令的背後，它使用create-next-app 工具，引導您創建 Next.js 應用程式。它通過--example 參數使用[這個模板](https://nextjs.tw/learn/basics/create-nextjs-app/setup#:~:text=example%20%E5%8F%83%E6%95%B8%E4%BD%BF%E7%94%A8-,%E9%80%99%E5%80%8B%E6%A8%A1%E6%9D%BF,-%E3%80%82)。
>如果它不起作用，請查看[此頁面](https://github.com/vercel/next-learn/blob/master/basics/errors/install.md)。


執行程式
------
```
cd nextjs-blog
npm run dev
```
預設執行位置 http://localhost:3000

頁面之間的導航
-----------

### 創建新頁面
在 Next.js 中，頁面是從 pages資料夾中的文件導出的 React 組件。

頁面根據其 文件名 來做路由。例如，在開發中：

`pages/index.js` 是對應 `/` 來做路由.
`pages/posts/first-post.js` 是對應 `/posts/first-post`  來做路由.


### `<Link>` 站內頁面跳轉
next.js已經寫好router，站內連結只需要使用`<Link>`就能完成站內跳轉。(Router跳轉不會觸發頁面刷新，`<a>`則會觸發導致畫面閃動)

> Next.js 會自動進行程式碼拆分，所以每個頁面只載入該頁面所需的內容。 這意味著在渲染首頁時，初始化的過程不會載入其他頁面的程式碼。

>在 Next.js 的生產版本中，每當 Link 元件出現在瀏覽器的顯示裝置中時，Next.js 都會在後台自動提前載入連結頁面的程式碼。當您單擊連結時，目標頁面的代碼已經在背景執行加載，所以頁面轉換幾乎是即時的！

#### 使用方法

在pages底下創立posts資料夾，並建立first-post.js，將以下代碼貼入
```
import Link from 'next/link';

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}
```
> 可以在瀏覽器的html增加background:yellow，並點擊連結跳轉來觀察`<a>`和`<Link>`的差異
>> (使用Link跳轉不會讓html顏色變回白色，代表Link並沒有刷新整個網頁而是使用Router跳轉)


靜態資源、詮釋資料 和 CSS
---------------------
### 靜態文件
可將靜態資源放置於`public`資料夾底下，例如圖片、robot.txt、Google Site Verification......，


### `<Image>` 圖片元件與圖片優化
#### 功能
圖片優化。包括了支援現代 web 格式，且進行大小調整、優化和運行圖片 (就像 WebP 一樣)，避免在較小的可見區域加載大型圖片。同時自動適應未來的圖片格式，並將其提供給支援這些格式的瀏覽器。

#### 使用方法
```
import Image from 'next/image';

const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // Desired size with correct aspect ratio
    width={144} // Desired size with correct aspect ratio
    alt="Your Name"
  />
);
```

### `<Head>` 詮釋資料（Metadata）

#### 使用方法
```
import Head from 'next/head';

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          Back to home
        </Link>
      </h2>
    </>
  );
}
```


### 自訂`<html>`標籤 Custom Document

_document.js 可建立全站共用的html屬性，如`<html lang="en">`或`<body class="bg-white"`
> <h3 style="color: red; font-weight: bold;">注意！！！</h3>    
> 此處使用的`<Head>`與`next/head`不同，會全站套用，如要設定頁面title或自定義css，建議在網頁或元件中使用`next/Head`。
    
    
#### 使用方法
```
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```


### <Script> 第三方 JavaScript

next/script 是基於 HTML <script> 元素的擴充功能，可優化提取和執行其他腳本的時機。

#### 使用方法

strategy：控制第三方腳本何時載入
onLoad：用於當腳本載入完成後要立即執行的任何 JavaScript 程式碼
****
```
import Script from 'next/script';

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`腳本正確地載入，window.FB 已被定義`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          Back to home
        </Link>
      </h2>
    </>
  );
}
```
    
