Next. Js Step on the pit entry series

  • Hello Next. Js
  • Add Antd && CSS
  • (3) Directory reconstruction && routing again
  • (4) Next. Js intermediate pit filling
  • (5) Introduce state management Redux
  • (6) Reconstruct the directory again
  • (7) Other relevant knowledge

Personally, I have an attachment to scaffolding UI. If I build it, it will be a homepage + A TAB jump, which is not my virgo style. Therefore, FOR the second step, I want to use the UI framework of Ant-Design. Because I used to mine pits when I was preparing, I would like to record it here

If you have any questions about Next. Js, you can add zhoudeyou945 to your personal wechat and leave a comment on Next

Install dependencies

Antd and babel-plugin-import are antD’s official add-on to Babel on demand.

// Install dependency yarn add antd babel-plugin-importCopy the code

Babel-plugin-transform-decorators-legacy is one of the most important tools in the development environment, since most of the development environment is now ES6/ES7 syntax, it is necessary to install babel-plugin-transform-decorators-Legacy. However, install it and configure it in Babel to use ANTD.

Of course there are other methods, but I’m just using this one here

{"presets": ["next/ Babel "], "plugins": [ "transform-decorators-legacy", [ "import", { "libraryName": "antd", "style": "css" } ] ] }Copy the code

Yarn Dev starts the project. A lot of errors. Why? Seems to be the server render when the node end of the problem, I am not quite clear about the specific because it is the introduction of god guidance specific message can teach little brother about, very grateful. Anyway, because there are some configuration files that need to be configured in webpack during other scaffold configurations, how can this not have configuration files? The official solution is to introduce a next-css package and require. Extensions [‘.css’]. Again, I don’t understand it, so I’ll look into it later. The current purpose is available ~ but the configuration of the scheme found here write.

// Install the dependency yarn add@zeit /next-css // create next.config.js in the root directory, /* eslint-disable */ const withCss = require('@zeit/next-css'); /* eslint-disable */ const withCss = require('@zeit/next-css'); // fix: prevents error when .css files are required by node if (typeof require ! == 'undefined') { require.extensions['.css'] = (file) => {} } module.exports = withCss();Copy the code

Now we are starting, there is no error, after all, it is the official solution, still work ~ change the home page a label into ANTD button to try the effect, the effect is as follows:

Well, it’s not that simple, so what’s wrong, there are no errors, there are no hints, it’s obvious that the style didn’t load in… Continue to check, OK, see, in fact, antD style is already there, but it is not introduced on the page. Why do you say that? Take a look at the following two pictures:

As you can see, the first is that the rendered page does not have any CSS styles in the head tag, and the second is that the ANTD style files have been packed into the static folder of the next folder.

Once the cause is found, the next step is to solve the problem

Next, js Head components

To solve the problem, we need to put the style. CSS on the page, but I searched the whole project directory, but could not find the index. We can use the head component to add the head information to our page.

// /pages/index.js import React, { Fragment } from 'react'; import { Button } from 'antd'; import Link from 'next/link'; import Head from 'next/head'; const Home = () => ( <Fragment> <Head> <meta name='viewport' content='width=device-width, initial-scale=1' /> <meta charSet='utf-8' /> <title>Next-Antd-Scafflod</title> <link rel='stylesheet' Href ='/_next/static/style. CSS '/ > </Head> <Fragment> <h1> <Link href='/userList'> <Button Type ='primary'> </Button> </Link> </Fragment> </Fragment>); export default Home;Copy the code

OK, now is not a bit NB, O(∩_∩)O ha ha ~, it is really a pit series ah, configure a UI component is so troublesome. There’s gonna be a hole to tread in!

Remove Head to Layout

Most applications will have a Menu navigation bar or something like that, so the page will do the page thing, and the head will feel strange to put in the page, or as usual, the head is removed as a high-level parent component. I created a components folder and created layout.js.

// /components/Layout.js
import Head from 'next/head';
export default ({ children }) => (
  <div>
    <Head>
      <meta name='viewport' content='width=device-width, initial-scale=1' />
      <meta charSet='utf-8' />
      <title>Next-Antd-Scafflod</title>
      <link rel='stylesheet' href='/_next/static/style.css' />
    </Head>
    <style jsx global>{`
      body {
      }
    `}</style>
    {children}
  </div>
);
Copy the code
// /pages/index.js import React, { Fragment } from 'react'; import { Button } from 'antd'; import Link from 'next/link'; import Layout from '.. /components/Layout'; const Home = () => ( <Layout> <Fragment> <h1>Hello Next.js</h1> <Link href='/userList'> <Button Type ='primary'> </Button> </Link> </Fragment> </Layout>); export default Home;Copy the code

Here, the entire Antd configuration is basically completed, ha ha, DID not expect to talk about an Antd configuration can write so much, really powerful ~ since the UI framework, incidentally I will also write CSS bar. Next csS-in-JS is used to write React as a Vue class. Components use the following form to modify their styles

 <style jsx>{`
      p {
        color: blue;
      }
      div {
        background: red;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}</style>
    <style global jsx>{`
      body {
        background: black;
      }
    `}</style>
Copy the code

If you want a child component to inherit the style of the parent component, you need to change the style JSX to Style Global JSX. In fact, it looks more like Vue

Styled styled Components, styled components, styled components, Styled components, Styled Components, Styled Components, Styled Components, Styled Components, Styled Components

Leave the pit

When using ANTD in the past, I used to reset the color palette and some other default properties. Here I used the old method, which was to rely on babel-plugin-import and change “style”: “CSS” to “style” in the babelrc file: True, babel-plugin-import will load the. Less file and override it by configuring modifyVars for less-loader in webpack:

config.module.rules.push({
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          }, {
              loader: "css-loader"
          }, {
              loader: "less-loader",
              options: {
                sourceMap: true,
                modifyVars: AntdTheme
              }
          }
        ]
    })
Copy the code

But in the Next framework it would be impossible to use less to introduce server-side rendering. Is that a trap? There is still a solution I did not check, in short, temporarily so, change words can also be changed, with the following way is good, irrelevant ~

<style jsx global>{`
      .ant-btn-primary {
        background-color: #ec6a00
      }
    `}</style>
Copy the code

You see, can also change, but personally think antD color is quite good, ha ha, don’t change. I think the official follow-up will be enhanced!

Maybe the official solution already exists, but I’m still not very good at using it? It also supports CSS-modules, but it’s not quite right, and I’m pretty comfortable with the way it’s written, so I don’t want to waste any time. Everyone interested can conquer, solved can leave a message to me, thank you very much ~

conclusion

Finished writing the second part, originally before writing thought very simple two clicks to complete the work, unexpectedly stepped on so many pits in the middle, because I was building the project while writing, so personally think it is more detailed, very suitable for beginners. Like me so conscience of the writer is not very few, ha ha. Next: Get ready for a good talk about routing and a brief overview of the project skeleton in preparation for redux