• First meeting next

  • antd+scss

  • Redux + Data linkage

  • Step pit – dynamic routing, DOM nodes, the same page will be refreshed, etc

results

Here’s a thought a week later. This is not the page before Next, www.uquwang.net:7890/. This is the page after next: www.uquwang.net. We can feel that the speed is simply not before than, like a rocket, moved to cry. At the end of the day, server-side rendering is awesome, and this thing can’t be removed. It took 7 hours to discover the problem in Linux. It needs to be written as next/Link.

The original

The author himself is to write a website for storing some fun websites, so that they can play at any time. But the first time into the found a problem, is the loading time is too long, **20s or so before the data. ** Waiting is too long, not a good option, and not friendly to search engines. So get ready to take a look at server-side rendering.

Next.js

I also followed Baidu to search all the way to next. Since react was used to build the page, it was quite friendly to me. I wanted to build it myself, but it was too messy. There was no unified standard and the problems were all kinds of strange. So go ahead and use Next, learn first, then go deeper. Don’t say a word. Just do it.

The installation

Create a folder and execute

cnpm install next react react-dom --save
Copy the code
Open ‘package.json’ and add the following
scripts: 

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
Copy the code

Different commands correspond to different development environments.

NPM run dev (-p) error: not found in pages folder

New pages/index. Js

// index.js function HomePage() { return <div>Welcome to Next.js! </div> } export default HomePageCopy the code

To run again

Perfect, all things are difficult at the beginning, perfect through the pre pre pre.

routing

View the official website. The page is associated with routes based on the file name. For example, pages/about.js maps to /about**. ** When it comes to routing, you have to mention hyperlinks.

There is a special encapsulation for hyperlinks in next

// index.js // import Link from ‘next/ Link ‘

function HomePage() {
  return <div>
  	Welcome to Next.js!
  	<Link href="/about">
      <a>to about</a>
    </Link>
  </div>
}

export default HomePage
Copy the code
// about.js
import React from 'react'

class About extends React.Component {
  render() {
    return (
      <div>
        about page
      </div>
    )
  }
}

export default About
Copy the code

Enter the page again and click “to About “to enter the About page. Well, it fits the above rules

Route map

I wonder if /a/b/c is the same as /pages/a/b/c.js.

In the pages folder, create /inner/one.js

// one.js
import React from 'react'

class One extends React.Component {
  render() {
    return (
      <div>
        One page
      </div>
    )
  }
}

export default One
Copy the code

You don’t have to click enter, direct input address http://localhost:5555/inner/one to see what effect

That’s right.

At this time, there is a doubt freshmen. If I only want to write one file under Pages, but the path corresponds to another, is that ok?

Create out.js under pages

// out.js
import React from 'react'

class Out extends React.Component {
  render() {
    return (
      <div>
        Out page
      </div>
    )
  }
}

export default Out
Copy the code

Modify the code in index.js

import Link from 'next/link' function HomePage() { return <div> Welcome to Next.js! <Link href="/about"> <a>to about</a> </Link> <br/> <Link href="/out" as ="/outpage/out" > <a>to out</a> </Link> </div> }  export default HomePageCopy the code

Go to the home page and click “To Out”“, yes, but a 404 is reported after a page swipe, which also causes the routing cannot be configured. But fortunately, the authorities gave us the answer,Custom serverI’ll talk about that later. Let’s finish the route.

Routing parameters

How to obtain route parameters, which can only be configured in next, URL? A =1&b=2. If you want to configure this URL/A /b, it will be linked to the custom server, so it is not considered for the moment.

Another thing I forgot to mention is how to jump without Link

Modify the following

// index.js import Link from 'next/ Link 'import router from 'next/router' function HomePage() {return <div> Welcome to Next.js! <Link href={{ pathname: '/about', query: { name: 'abc' }}}> <a>to about</a> </Link> <br/> <button onClick={(e) => { Router.push({ pathname: '/about', query: { name: 'abc' }, })} >click</button> </div> export default HomePage // about.js import React from 'React' import {withRouter  } from 'next/router' class About extends React.Component { render() { return ( <div> about page! name is : {this.props.router.query.name} </div> ) } } export default withRouter(About)Copy the code

To go to the home page, click to About

Yes, that’s it!

The last

Itself also did not have a deep understanding, still in the beginning stage, it is equivalent to a study notes.