Next.js是一個(gè)新的通用JavaScript框架堡妒，它為基于React和服務(wù)器的Web應(yīng)用提供了一個(gè)新的可選方案。
Next.js目前已經(jīng)開源溉卓，https://zeit.co/blog/next
我們知道,Next.js是關(guān)于頁面的皮迟。我們可以通過導(dǎo)出一個(gè)React組件來創(chuàng)建一個(gè)頁面搬泥，將該組件放在 pages 目錄中。然后它將有一個(gè)基于文件名的固定URL伏尼。
因?yàn)閷?dǎo)出的頁面是JavaScript模塊忿檩，我們還可以將其他JavaScript組件導(dǎo)入到它們中。
這是任何JavaScript框架都希望看到的特性爆阶。
在這個(gè)課程中燥透，我們將創(chuàng)建一個(gè)公共的 Header 組件，并在多個(gè)頁面中使用它辨图。最后班套，我們會看看如何實(shí)現(xiàn)布局組件，看它如何能夠幫助我們定義多個(gè)頁面的外觀故河。
讓我們開始吧吱韭。
安裝
在這節(jié)課中,我們需要一個(gè)簡單的Next.js應(yīng)用程序。試著下載下面的示例應(yīng)用程序:
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout navigate-between-pages
你可以通過以下命令執(zhí)行:
npm install
npm run dev
現(xiàn)在鱼的，您可以通過導(dǎo)航到http://localhost:3000來訪問該應(yīng)用程序理盆。
創(chuàng)建Header組件
讓我們?yōu)槲覀兊膽?yīng)用程序創(chuàng)建一個(gè)Header組件。
將下面的內(nèi)容添加到文件 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
這個(gè)組件包含兩個(gè)鏈接到我們的應(yīng)用程序的頁面猿规。我們對這個(gè)鏈接定義了樣式，讓它更突出一些宙橱。
使用Header組件
接下來姨俩，讓我們導(dǎo)入這個(gè)組件并在我們的頁面中使用它。在 index.js 頁面养匈，它看起來是這樣的:
import Header from '../components/Header'
export default () => (
<div>
<Header />
<p>Hello Next.js</p>
</div>
)
你也可以做同樣的事情在 about.js 頁面哼勇。
此時(shí)，如果您在http://localhost:3000/中導(dǎo)航到您的應(yīng)用程序呕乎，您將能夠看到新的標(biāo)題并在頁面之間導(dǎo)航积担。
讓我們嘗試對應(yīng)用程序做一些簡單的修改。
- 停止正在運(yùn)行的應(yīng)用程序猬仁。
- 將組件目錄 components 重命名為 comps帝璧。
- 導(dǎo)入 Header 用 ../comps/Header 代替 ../components/Header.
- 再次啟動應(yīng)用程序。
能行嗎湿刽？
組件目錄
是的的烁。它將按預(yù)期工作。
我們不需要把我們的組件放在一個(gè)特殊的目錄中;這個(gè)目錄可以命名為任何東西诈闺。惟一的特殊目錄是頁面目錄渴庆。
甚至可以在 pages 目錄中創(chuàng)建組件。
這里我們沒有這樣做，因?yàn)槲覀儾恍枰苯覷RL到頭組件襟雷。
布局組件
在我們的應(yīng)用中刃滓，我們將在不同的頁面中使用一種通用的樣式。為此耸弄，我們可以創(chuàng)建一個(gè)通用的布局組件咧虎，并在每個(gè)頁面使用它。這里有一個(gè)例子:
將這些內(nèi)容添加到 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
一旦我們做到了這一點(diǎn)砰诵，我們就可以在頁面中使用如下的布局:
// 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/中訪問該應(yīng)用程序捌显，查看它長成什么樣子茁彭。
現(xiàn)在讓我們試著在布局組件中移除 {props.children}∥辏看看應(yīng)用程序會發(fā)生什么尉间。
應(yīng)用會發(fā)生什么情況?
渲染子組件
如何你移除了 {props.children},
布局不能呈現(xiàn)我們放入布局元素的內(nèi)容，如下所示:
export default () => (
<Layout>
<p>This is the about page</p>
</Layout>
)
這只是創(chuàng)建布局組件的一種方式击罪。下面是一些創(chuàng)建布局組件的方法:
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}/>)
使用組件
我們已經(jīng)提到了共享組件的兩個(gè)用例:
- 作為通用的Header組件哲嘲。
- 作為布局的
您可以使用組件來定義樣式、頁面布局和其他您喜歡的任務(wù)媳禁。另外眠副，您可以從NPM模塊中導(dǎo)入組件并使用它們。
本文翻譯自：https://learnnextjs.com/basics/using-shared-components
