The first two articles:

How to Learn NextJS

How to Learn NextJS

Today we’ll continue talking about next server rendering, focusing on API routing and next. Config.js configuration.

# API routing

The purpose of API routing is to use next.js, and it provides a simple solution when building your own backend interface.

To use it, simply create a new API folder in the Pages directory. Any files in this folder will be mapped to the/API /* path.

Let’s look at the writing format of the files in the API folder and create a user.js file.

//user.js
export default (req,res)=>{
    res.send({
        name:"zhangsan",
        age:23
    })
}
Copy the code

From the above code, we can see that we must export a function with arguments req and res. Req is the request, res is the response. You can learn about node and its functions.

We use res.send({}) to finally output a data object. The url input corresponding interface in a web page http://localhost:3000/api/user can see web response data.

A simple background API works.

# Next.config.js

If we want to customize some configuration, we need to create a new file in the project directory.

Note that names cannot be changed arbitrarily.

This is the interface file left to us by the Next black box, in which we export an object.

//next.config.js
module.exports = {
}
Copy the code

Now let’s practice with a less file. Create a new style.less file in the project directory.

//style.less
body{
    background:red;
}
Copy the code

Import this file in _app.js.

import '.. /styles.less' export default function MyApp({ Component, pageProps }) { return <Component {... pageProps} /> }Copy the code

Then we need to follow the official recommendation @zeit/next-less less

Then in next.config.js:

const withLess = require('@zeit/next-less')
module.exports = withLess({
  /* config options here */
})
Copy the code

This way, after restarting the service NPM run dev, the entire project is up and running.

That brings us to the end of the three next articles. Of course, there are a lot of things to refine, whether it is to see the official website or source code, there are a lot of things we have to learn.

After reading these three articles, it is more than enough to build a blog, or a product display website. I hope my friends will continue to go further and further in the front end. Come on!

End scatter flowers (. · ∀ ·) Blue ゙