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/中导航到您的应用程序，您将能够看到新的标题并在页面之间导航。
image.png
让我们尝试对应用程序做一些简单的修改。
- 停止正在运行的应用程序。
- 将组件目录 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}/>)
使用组件
我们已经提到了共享组件的两个用例:
- 作为通用的Header组件。
- 作为布局的
您可以使用组件来定义样式、页面布局和其他您喜欢的任务。另外，您可以从NPM模块中导入组件并使用它们。
本文翻译自：https://learnnextjs.com/basics/using-shared-components
网友评论