三、Next.js，共享元件

Next.js是一個新的通用JavaScript框架，它為基於React和伺服器的Web應用提供了一個新的可選方案。

Next.js目前已經開源，https://zeit.co/blog/next

我們知道,Next.js是關於頁面的。我們可以通過匯出一個React元件來建立一個頁面，將該元件放在 pages 目錄中。然後它將有一個基於檔名的固定URL。

因為匯出的頁面是JavaScript模組，我們還可以將其他JavaScript元件匯入到它們中。

這是任何JavaScript框架都希望看到的特性。

在這個課程中，我們將建立一個公共的 Header 元件，並在多個頁面中使用它。最後，我們會看看如何實現佈局元件，看它如何能夠幫助我們定義多個頁面的外觀。

讓我們開始吧。

安裝

在這節課中,我們需要一個簡單的Next.js應用程式。試著下載下面的示例應用程式:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout navigate-between-pages

你可以通過以下命令執行:

npm install
npm run dev

現在，您可以通過導航到http://localhost:3000來訪問該應用程式。

建立Header元件

讓我們為我們的應用程式建立一個Header元件。

將下面的內容新增到檔案 components/header.js 中。

import Link from 'next/link'

const linkStyle = {
  marginRight: 15
}

const Header = () => (
    <div>
        <Link href="/">
          <a style={linkStyle}>Home</a>
        </Link>
        <Link href="/about">
          <a style={linkStyle}>About</a>
        </Link>
    </div>
)

export default Header

這個元件包含兩個連結到我們的應用程式的頁面。我們對這個連結定義了樣式，讓它更突出一些。

使用Header元件

接下來，讓我們匯入這個元件並在我們的頁面中使用它。在 index.js 頁面，它看起來是這樣的:

import Header from '../components/Header'

export default () => (
  <div>
    <Header />
    <p>Hello Next.js</p>
  </div>
)

你也可以做同樣的事情在 about.js 頁面。

此時，如果您在http://localhost:3000/中導航到您的應用程式，您將能夠看到新的標題並在頁面之間導航。

讓我們嘗試對應用程式做一些簡單的修改。

• 停止正在執行的應用程式。
• 將元件目錄 components 重新命名為 comps。
• 匯入 Header 用 ../comps/Header 代替 ../components/Header.
• 再次啟動應用程式。

能行嗎？

元件目錄

是的。它將按預期工作。

我們不需要把我們的元件放在一個特殊的目錄中;這個目錄可以命名為任何東西。惟一的特殊目錄是頁面目錄。

甚至可以在 pages 目錄中建立元件。

這裡我們沒有這樣做，因為我們不需要直接URL到頭元件。

佈局元件

在我們的應用中，我們將在不同的頁面中使用一種通用的樣式。為此，我們可以建立一個通用的佈局元件，並在每個頁面使用它。這裡有一個例子:

將這些內容新增到 components/MyLayout.js。

import Header from './Header'

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
}

const Layout = (props) => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
)

export default Layout

一旦我們做到了這一點，我們就可以在頁面中使用如下的佈局:

// pages/index.js

import Layout from '../components/MyLayout.js'

export default () => (
    <Layout>
       <p>Hello Next.js</p>
    </Layout>
)

// pages/index.js

import Layout from '../components/MyLayout.js'

export default () => (
    <Layout>
       <p>Hello Next.js</p>
    </Layout>
)

請記住，您可以在http://localhost:3000/中訪問該應用程式，檢視它長成什麼樣子。

現在讓我們試著在佈局元件中移除 {props.children}。看看應用程式會發生什麼。

應用會發生什麼情況?

渲染子元件

如何你移除了 {props.children},

佈局不能呈現我們放入佈局元素的內容，如下所示:

export default () => (
    <Layout>
       <p>This is the about page</p>
    </Layout>
)

這只是建立佈局元件的一種方式。下面是一些建立佈局元件的方法:

import withLayout from '../lib/layout'

const Page = () => (
  <p>This is the about page</p>
)

export default withLayout(Page)

const Page = () => (
  <p>This is the about page</p>
)

export default () => (<Layout page={Page}/>)

const content = (<p>This is the about page</p>)

export default () => (<Layout content={content}/>)

使用元件

我們已經提到了共享元件的兩個用例:

1. 作為通用的Header元件。
2. 作為佈局的

您可以使用元件來定義樣式、頁面佈局和其他您喜歡的任務。另外，您可以從NPM模組中匯入元件並使用它們。

本文翻譯自：https://learnnextjs.com/basics/using-shared-components