原始文档在 https://github.com/developerw… 如今搬过来.
进修 Next.js: 入门
进修 Next.js: 页面之间的导航
进修 Next.js: 运用同享组件
进修 Next.js: 建立动态内容
进修 Next.js: 运用路由掩码建立清洁的URL
进修 Next.js: 清洁URL的服务器支撑
进修 Next.js: 猎取数据
进修 Next.js: 布置
运用同享组件
我们晓得 Next.js 是和页面相干的. 经由过程导出一个 React组件建立一个页面, 然后把它放到 pages
目次中, 基于这个文件名, Next.js存在一个牢固的URL.
由于导出的页面是Javascript模块, 我们固然也能够导入其他组件进来.
在这节课中, 我们会建立一个同享的页头组件, 并在多个页面之间共用. 末了我们事前一个规划组件来看看, 它是怎样定义多个页面的表面的.
设置
为了演示这节课说讲的知识点, 我们须要一个可运转的示例应用程序, 经由过程下面的敕令来猎取一个现成的应用程序:
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout navigate-between-pages
能够经由过程下面的敕令行来运转:
npm install
npm run dev
建立页头组件
如今, 让我们来为我们的应用程序建立一个页头组件. 增加下面的代码到 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
该组件包括两个链接到其他页面的衔接. 我们同时给两个链接设置了一个款式对象, 设置了它的字体为15.
运用页头组件
如今, 让我们在页面中导入这个刚建立的页头组件. 如今关于 pages/index.js
, 它的内容看起来像下面如许:
import Header from '../components/Header'
export default () => (
<div>
<Header />
<p>Hello Next.js</p>
</div>
)
你能够对 pages/about.js
页面做一样的事变. 如今, 假如你接见 http://localhost:3000/, 你会看到新的页头, 而且能够在页面之间举行导航.
如今, 我们对这个应用程序举行一些小修正.
住手应用程序.
重命名
components
目次为comps
.从
../comps/Header
导入, 而非../components/Header
再次启动应用程序
它还能事情么?
组件目次
是的, 和之前一样, 事情一般! 我们不须要把组件放在一个特别的目次下, 组件目次能够是恣意称号, 唯一特别的目次就是 pages
目次, 你以至能够在 pages
目次中建立组件目次. 这里, 我们没有直接在 pages
目次下建立组件目次是由于, 我们不须要直接衔接到 Header 组件.
译注:
pages
目次就像Web服务器的根目次一样, 经由过程天然的目次/URL途径, 你能够接见到pages
目次下的组件. 就像Linux文件体系一样, URL中的PATH和文件体系的途径是一一对应的.
规划组件
在我们的应用程序中, 我们在多个页面之间同享一个大众的款式. 为此我们能够建立一个大众的规划组件, 而且在多个页面运用它. 下面是一个例子, 增加下面的代码到 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/about.js
import Layout from '../components/MyLayout.js'
export default () => (
<Layout>
<p>This is the about page</p>
</Layout>
)
接见 http://localhost:3000/, 看看有什么结果.
如今我们从规划组件中删除 {props.chidren}
, 看看会发作什么?
衬着子组件
假如你删除了 {props.chidren}
, 规划组件Layout不再衬着它所包括的内容:
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.作为大众的页头组件
2.作为规划组件
你能够把组件用于: 设置大众款式, 页面规划, 以及任何其他你想要的用处. 别的, 你也能够从NPM模块中导入组件而且运用他们.