Next.js 目錄結(jié)構(gòu)

入口App組件（_app.tsx）

_app.tsx是項目的入口組件，主要作用：

• 可以擴展自定義的布局（Layout）
• 引入全局的樣式文件
• 引入Redux狀態(tài)管理
• 引入主題組件等等
• 全局監(jiān)聽客戶端路由的切換

ts.config.json 的配置

Next.js默認是沒有配置路徑別名的，我們可以在ts.config.json中配置模塊導(dǎo)入的別名：

• baseUrl ：配置允許直接從項目的根目錄導(dǎo)入，比如： import Button from ‘components/button’
• paths：允許配置模塊別，比如： import Button from '@/components/button’

Next.js配置（next.config）

next.config.ts 配置文件位于項目根目錄，可對Next.js進行自定義配置，比如，可以進行如下配置：

• reactStrictMode: 是否啟用嚴格模式，輔助開發(fā)，避免常見錯誤，例如：可以檢查過期API來逐步升級
• env：配置環(huán)境變量，配置完需要重啟
  • ? 會添加到 process.env.xx 中
  • ? 配置的優(yōu)先級： next.config.js中的env > .env.local > .env
• basePath：要在域名的子路徑下部署 Next.js 應(yīng)用程序，您可以使用basePath配置選項。
  • ? basePath：允許為應(yīng)用程序設(shè)置URl路徑前綴。
  • ? 例如 basePath=/music, 即用 /music 訪問首頁，而不是默認
• images：可以配置圖片URL的白名單等信息
• swcMinify: 用 Speedy Web Compiler 編譯和壓縮技術(shù)，而不是 Babel + Terser 技術(shù)

更多的配置： https://nextjs.org/docs/api-reference/next.config.js/introduction

內(nèi)置組件

Image組件

全局和局部樣式

靜態(tài)資源引用

字體圖標

字體圖標使用步驟 ：

• 1.將字體圖標存放在 assets 目錄下
• 2.字體文件可以使用相對路徑和絕對路徑引用。
• 3.在_app.tsx文件中導(dǎo)入全局樣式
• 4.在頁面中就可以使用字體圖標了

新建頁面

路由

app.tsx檢查路由的跳轉(zhuǎn)：

useEffect(() => {
  const handleRouteChange = (url: string) => {
    console.log(`App is changing to ${url}`);
  };
  // 監(jiān)聽路由的前進和后退
  // router.beforePopState(function (e) {
  //   console.log("beforePopState");
  //   console.log(e);
  //   return true;
  // });
  router.events.on("routeChangeStart", handleRouteChange);
  return () => {
    router.events.off("routeChangeStart", handleRouteChange);
  };
}, []);

組件導(dǎo)航（Link）

編程導(dǎo)航 (useRouter)

動態(tài)路由

路由參數(shù)(useRouter)

404 Page

路由匹配規(guī)則

? 路由匹配優(yōu)先級， 即預(yù)定義路由優(yōu)先于動態(tài)路由，動態(tài)路由優(yōu)先于捕獲所有路由。請看以下示例：

• 1.預(yù)定義路由：pages/post/create.js
  • ? 將匹配 /post/create
• 2.動態(tài)路由 ：pages/post/[pid].js
  • ? 將匹配/post/1, /post/abc 等。
  • ? 但不匹配 /post/create 、 /post/1/1 等
• 3.捕獲所有路由：pages/post/[…slug].js
  • ? 將匹配 /post/1/2, /post/a/b/c 等。
  • ? 但不匹配/post/create, /post/abc、/post/1、、/post/ 等

來自資源：imooc文章來源地址http://www.zghlxwxcb.cn/news/detail-684168.html

到了這里，關(guān)于Next.js基礎(chǔ)語法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！