目录结构

pages
----p
----about.js

pages 目录下文件名对应地址栏， 如

• pages/about.js => http://localhost:3000/about
• pages/p/blog.js -> http://localhost:3000/p/blog

组件样式

• 内置CSS支持
• CSS-in-JS
• Importing CSS / Sass / Less / Stylus files

内置CSS支持

styled-jsx

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

路由

页面导航

使用 next/link 导航页面

// This is the Link API
import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

动态路由