why i dont get nothing in nextjs in first load (css and params in getInitialProps)

Question

guys im new in nextjs .

when i use import css files in pages that i create in pages folder doesnt load in first load i have to load it agin to see it and when i call api in getInitialProps

next.config.js

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
// const withImages = require('next-images');
// module.exports = withImages()
module.exports = withSass({
    ...withCSS({  
        cssModules: false,
        webpack: function (config) {
            config.module.rules.push({
              test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
              use: {
                loader: 'url-loader',
                options: {
                  limit: 100000,
                  name: '[name].[ext]'
                }
              }
            })
            return config
          }    
    }),
    cssModules: true,

})

// _document.js

import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />

           <link rel="stylesheet" href="/public/css/fontAwsome/all.min.css" /> 
          <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
            integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
            crossorigin="anonymous"
          />

          <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"
          />
        </Head>
        <body dir="rtl" className="text-right">
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

Answer 1

You are merging object with function in you next.config.js it resolves callback within a callback a simpler example will be

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
module.exports = withCSS(withSass({
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });

        return config;
    }
}));

You need to export it as withCSS(withSass({ // Config }))

Happy Coding!

why i dont get nothing in nextjs in first load (css and params in getInitialProps)

Question

1 answers

solution1
-1 2019-12-02 07:18:31

why i dont get nothing in nextjs in first load (css and params in getInitialProps)

Question

1 answers

solution1 -1 2019-12-02 07:18:31

solution1
-1 2019-12-02 07:18:31