nextjs学习笔记(一)

本文由我一边看网上的nextjs的资源(原文网址:https://segmentfault.com/a/1190000010311978)，
一边根据自己的实际操作验证写成。

nextjs

1.简介

Next.js是一个基于React实现的服务端渲染框架，github地址为next.js。无需书写webpack等配置文件。

2.初始化

与其他基于node的框架一样，mkdir->cd->init->install->mkdir->package.json->scripts->localhost://3000

• ⚠️最后这里一定要创建pages目录哦，否则会报错的,如下。这是因为Next.js采用的是文件系统作为API，每一个放在pages中的文件都会映射为一个路由，路由名称与文件名相同。

  LynndeMacBook-Pro:myapp lynn$ npm run dev
  
  > my-app@0.1.0 dev /Users/lynn/Desktop/myapp
  > next
  
  > Couldn't find a `pages` directory. Please create one under the project root
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! my-app@0.1.0 dev: `next`
  npm ERR! Exit status 1
  npm ERR! 
  npm ERR! Failed at the my-app@0.1.0 dev script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

index.js(我也不知道为什么一定要命名为index.js,总之我现在这样写成其他名字是不行的，也许是因为在编译的时候源文件的名字就是index.js。run之后会自动生成.next目录，包含了打包，es6的编译。)

import React from 'react';//这一句非常重要
export default () => (
    <h1>Hello Next.js</h1>
)

页面导航Link

import Link from 'next/link'
export default () => (
    <div>
        <Link href="/about" >
            <a>About Page</a>
        </Link>
        <h1>Hello Next.js</h1>
    </div>
)

公用组件component

⚠️非常重要的一点是自己定义的组件的首字母一定要大写
import的顺序不重要

Header.js

import Link from 'next/link';
import React from 'react';
const listStyle = {
    marginRight: 15
}

export default () => (
    <div>
        <Link href = "/">
            <a style={listStyle}>Home</a>
        </Link>
        <Link href = "/about">
            <a style={listStyle}>About</a>
        </Link>
    </div>
)

Layout.js

import React from 'react';
import Header from './header';

const layoutStyle = {
    margin: 20,
    padding: 20,
    border: '1px solid #ddd'
}

export default (props) => (
    <div style = {layoutStyle}>
        <Header />//此时就可以使用Header标签了，index.js中的layout也是同样的道理
        {props.children}//组件嵌套时父组件用它来将所有组件显示出来，所有上面会有参数的传递
    </div>
)

index.js

import React from 'react';
import Layout from '../component/layout.js';
export default () => (
    <Layout>
        <h1>Hello Next.js</h1>
    </Layout>
)

动态页面

index.js

• as属性的作用是更改路由的名称,现在的地址栏的地址显示为http://localhost:3000/p/learn-nextjs。而如果不使用as属性，它会直接显示href的值http://localhost:3000/post?id=hello-nextjs

  import React from 'react';
  import Layout from '../components/layout.js'
  import Link from 'next/link'
  
  const PostLink = (props) => (
      <li>
      <Link as={`/p/${props.id}`}  href={`/post?id=${props.id}`}
        <a>{props.id}</a>
      </Link>
    </li>
  )
  export default () => (
      <Layout>
      <h1>My Blog</h1>
      <ul>
        <PostLink id="hello-nextjs" />
        <PostLink id="learn-nextjs" />
        <PostLink id="deploy-nextjs" />
      </ul>
    </Layout>
  )

post.js

import Layout from '../components/Layout.js'
export default (props) => (
    <Layout>
       <h1>{props.url.query.id}</h1>//从url.query.id中拿到页面传过来的id
       <p>This is the post page.</p>
    </Layout>
)