標籤: next.js

【筆記】Next.js #2(Router)

歡迎到我的github.io看這篇文章～

https://jeserlin.github.io/MyTechBlog/#/nextJs2

前言

在上一篇文章中我們建立了一個Next.js的專案。Next.js有包裝好的router功能，除了能提供client-side navigation之外，還能實現server-side navigation。

新增頁面

我們只要在pages folder下新增react component並且export就完成頁面的新增了，比如說我們來建立一個about頁面：

// pages/about.js

export default function About() {
  return (
    <div>
      <p>This is the about page</p>
    </div>
  );
}

把專案run起來之後，我們就能在 http://localhost:3000/about 看到畫面了。

這個時候我們打開browser的console可以看到，這個頁面是server-side rendering。(第一行的about)

連結頁面

既然我們已經有頁面的url了那我們就可以直接用HTML的<a>來連接頁面了。但是這樣的做法會是server-side rendering，也就是說瀏覽器會去跟server要頁面然後再更新到畫面上。

為了實現client-side rendering我們要使用Next.js的Link API。首先我們要使用next/link來連結兩個頁面：

// This is the Link API
import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about" title="About Page">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

現在我們會看到頁面中多了一個link：

點下link的時候可以從console中觀察到，about頁面不再是從server過來的而使從about.js讀取。

如果你有點client-side routing的陰影，不要擔心。這時候我們按上一頁，會回到index頁面而且也是client-side rendering。Next.js已經幫我們處理好location.history的問題的了，完全不需要再自己處理了～～

限制

next/link是一個HOC，他只接受href及少部分類似的props。如果我們需要傳遞props的話，應該要在他的chidren中傳遞。以上方的例子來說，我們應該把props寫在<a>裡面：

<Link href="/about">
  <a title="About Page">About Page</a>
</Link>

這時候你會看到<a>中多了title:

如果放在<Link>裡面則會得到unknown props的錯誤訊息：

但也不是所有的component都能夠放在next/link裡，他至少需要有onClick這個屬性。

資料來源

【筆記】Next.js #1( 建立)

歡迎到我的github.io看這篇文章～

https://jeserlin.github.io/MyTechBlog/#/nextJs1

前言

在我們建立一個React的專案時，一般都會使用官方提供的create-react-app。雖然可以快速的建立一個React的專案，但是學習曲線還是偏高。比如說設定webpack，router等等。更別說如果你需要處理SEO的話，還需要server-side render你的頁面。Next.js是一個React Framework，他提供了許多功能可以輕鬆解決剛剛提到的困擾：

  • Server-side rendering
  • Routing System
  • CSS-in-JS
  • Static Exporting
  • 等等

建立

其實官網提供了很不錯的step by step的教學，在每完成一步之後都會得到一些點數，目前不是很清楚這些點數能幹嘛XDD，但是似乎給了一些繼續往下學習的動力lol

以下紀錄建立過程的重點（手動建立）：

mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

然後開啟package.json做一下的修改：

{   "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

設定好之後用以下指令把project run起來：

npm run dev

開啟 http://localhost:3000 你會看到404的畫面，如下：

還記得我們剛剛有建立一個pages的folder嗎？會出現以上的畫面是因為，我們沒建立任何的頁面。現在來建立一個簡單的index頁面在pages folder下：

// pages/index.js

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

再次refresh頁面就會看到index頁面了！

如果你有開發過react專案的話，此時此刻一定會感受到Next.js中router的強大之處。我們只要export一個React Component然後把他放在pages folder下，就可以得到一個以檔案名一樣的固定URL，完全不需要額外的處理。不過這邊的render方式是server-side renderding，下一篇會主要紀錄server-side rendering跟client-side rendering。

資料來源