[NextDoc] Getting Started
- Create a Next.js App @ next.js > basic
- Examples @ next.js
TD;DR
# 檢視所有 Next.js 提供的指令
$ npx next --help
$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
Navigation
- Next.js 會自動處理 code splitting、client-side navigation 和 prefetching(production 時)的功 能
- code splitting 指的是只會下載使用者有用到的(有檢視到的)頁面,Next.js 會自動做 code-splitting 並且只傳送使用者有看到的頁面到 client。
- client-side navigation 表示它不是真正透過 HTTP Request 來達到換頁的,而是透過 JavaScript 讓使用者所看到的頁面改變,因為瀏覽器不需要整個重新 reload,所以速度會比較快
- prefetching 指的是 next.js 會根據該頁
<Link />
中有用到的頁面,預先把檔案下載下來,減少使用者在頁面切換間所需等待的時間
- 如果希望在連結上添加 HTML 屬性,例如
className
,需要加在<Link />
元件中的<a />
元素,而不是放在<Link />
上:
// https://github.com/vercel/next-learn-starter/blob/master/snippets/link-classname-example.js
import Link from 'next/link';
export default function LinkClassNameExample() {
// To add attributes like className, target, rel, etc.
// add them to the <a> tag, not to the <Link> tag.
return <Link href="/">Hello World</Link>;
}
warning
如果在 next.config.js
有設定 basePath
的話,一定要使用 next/link
提供的 Link
元件,如果直接使用 <a />
的話,連結的網址不會自動加上 basePath 作為前綴。
Assets, Metadata, and CSS
Assets
keywords: <Image />
- Static File Serving @ Next.js > Docs > Basic Features
- Image Optimization @ Next.js > Docs > Basic Features
-
靜態檔案會放在
/public
資料夾中。 -
透過 Next.js 提供的
Image
元件,可以自動- 根據不同的螢幕尺寸來 responsive 的顯示圖片
- 最佳化圖片(變更尺寸、最佳化、在瀏覽器支援的情況下使用 WebP)
- 只有在圖片進入 viewport 時才下載該圖片
-
既使圖片是來自外部(例如,CMS),Next.js 一樣可以針對這些圖片進行優化;此外,Next.js 會在圖片需要被使用時(例如,瀏覽器發送請求時)才進行優化的動作,而非在 build-time 就把圖片都處理完 ,因此不會因為圖片的數量變多而使得 build time 的時間增加。
Metadata
keywords: <Head />
Customize Document @ Next.js > Docs > Advanced Features
- 透過 Next.js 提供的
<Head />
元件,可以改變 HTML 頁面中<head />
的內容。
Third-Party JavaScript
keywords: <Script />
使用 next/script
可以用來載入第三方的 JavaScript 檔(例如 Facebook SDK),它提供了一些 helper 可以使用:
// https://nextjs.org/learn/basics/assets-metadata-css/third-party-javascript
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(`script loaded correctly, window.FB has been populated`)}
/>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
);
}
CSS Styling
- Built-In CSS Support @ Next.js > Docs > Basic Features
- 在 Next.js 中預設就支援 CSS Modules、SASS 和 styled-jsx 的寫法,若有需要也可以使用 styled-components、emotion、Tailwind CSS 等等。
- 若需要使用全域的 CSS 樣式,需要建立
pages/_app.js
這支檔案。這支檔案將會是最上層的元件,可以橫跨不同的頁面:
// pages/_app.js
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
warning
當新增 pages/_app.js
的檔案後,需要重新啟動伺服器。