Please add exemples of use

[selique]

please add exemples how use this on application develop

like exemple

next.config.js

const path = require("path");
const withSass = require("@zeit/next-sass");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const withFonts = require("next-fonts");

module.exports = withFonts({
  assetPrefix: "https://example.com",
  webpack(config, options) {
    return config;
  }
});
const nextConfig = withSass({
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(raw)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      use: "raw-loader"
    });
    config.module.rules.push({
      type: "javascript/auto",
      test: /\.modernizrrc(\.json)?$/,
      use: ["expose-loader?Modernizr", "modernizr-loader", "json-loader"]
    });
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 100000,
          publicPath: "./",
          outputPath: "static/",
          name: "[name].[ext]"
        }
      }
    });
    config.resolve = {
      alias: {
        modernizr$: path.resolve(__dirname, ".modernizrrc.json")
      }
    };
    if (config.mode === "production") {
      if (Array.isArray(config.optimization.minimizer)) {
        config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
      }
    }
    return config;
  }
});

nextConfig.exportPathMap = () => {
  return {
    "/": { page: "/" }
  };
};

module.exports = nextConfig;

[rohanray]

@selique I would appreciate a PR.

[rohanray]

@selique The Readme file already has sample code for usage of next-fonts plugin. I'm guessing different people would have different plugins configured as per their needs viz. images plugin or sass plugin etc. Usage of those plugins would/should be available on the corresponding repos. Hence, I would suggest that we avoid mentioning other packages in the example usage.

Thanks - RR

[NickFoden]

I disagree.

When first starting a next project from create next app, a persons first step might be setting up fonts (my situation today) and they have no next.config.js file. What custom webpack config and loaders is required?

A working example with a next.config.js with how to use this package would be a lifesaver.

module.exports = withFonts({
  assetPrefix: "https://example.com",
  webpack(config, options) {
    return config;
  }
});

I have been spinning on this for a while. Going to take a break and then try it again.

[rohanray]

@NickFoden : something like this https://github.com/rohanray/next-fonts#usage? It's there in readme.

[NickFoden]

@rohanray thank you for the reply. As it turned out I had issues with the actual font files. Sorry for the pings. Really appreciate the follow up.