样式和嵌套组件

现在我们来添加一个简单的更改到我们的主页。 我们已经隔离了我们的链接组件，如下所示：

  1. import Layout from '../components/MyLayout.js'
  2. import Link from 'next/link'
  4. function getPosts () {
  5.   return [
  6.     { id: 'hello-nextjs', title: 'Hello Next.js'},
  7.     { id: 'learn-nextjs', title: 'Learn Next.js is awesome'},
  8.     { id: 'deploy-nextjs', title: 'Deploy apps with ZEIT'},
  9.   ]
  10. }
  12. const PostLink = ({ post }) => (
  13.   <li>
  14.     <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}>
  15.       <a>{post.title}</a>
  16.     </Link>
  17.   </li>
  18. )
  20. export default () => (
  21.   <Layout>
  22.     <h1>My Blog</h1>
  23.     <ul>
  24.       {getPosts().map((post) => (
  25.         <PostLink key={post.id} post={post}/>
  26.       ))}
  27.     </ul>
  28.     <style jsx>{`
  29.       h1, a {
  30.         font-family: "Arial";
  31.       }
  33.       ul {
  34.         padding: 0;
  35.       }
  37.       li {
  38.         list-style: none;
  39.         margin: 5px 0;
  40.       }
  42.       a {
  43.         text-decoration: none;
  44.         color: blue;
  45.       }
  47.       a:hover {
  48.         opacity: 0.6;
  49.       }
  50.     `}</style>
  51.   </Layout>
  52. )

在 pages/index.js 中替换上述内容

会发生什么？

  1. ✦没有变化
  2. ✓存在h1的类型，但不适用于链接
  3. ✦页面上有错误
  4. ✦控制台上有错误