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