Next.JS - Quick to setup React Framework with logical defaults

Main Site

Next is maintained by Varcel ™️ which gives me some trust that it'll continue to be well maintained in the near future and a fairly safe bet.

Setup

This will create everything needed to start.

yarn create next-app

Basic layout

-- out/
-- public/
    - favicon.ico
-- styles/
    - globals.css
-- pages/
    - index.js
- _app.js
- next.config.js
- package.json

Static Site setup & generating

Although NEXTjs is built to run a server side server to serve the site it can also generate a static sight that doesn't require a NODEjs server. In most cases it can be setup to do this with little or no loss of function.

next export is the cli command to generate the static site. I would suggest adding in the following to the 'package.json' file to speed this up. Then you can run this with yarn build.

"scripts": {
  "export": "next build && next export"
}

The output of this will be in the '/out/' directory which can then be copied to your server site.

htaccess file

You might, depending on your host and hosting software need to add an .htaccess file so that all urls are rewritten correctly. Here is what I needed for a basic host yours might differ. The .htaccess file is byond the scope of this document so I will just say simply that this looks for requests and based on that rewrites them as something else internally.

RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule !.*\.html$ %{REQUEST_FILENAME}.html [L]

changes to next.config.js

I have also found that the urls don't match with the created static pages quite right out of the box. including trailingSlash: true to the module.exports section fixes this issue though.

Setting up Markdown documents

Markdown documents are quick and easy to write without having to think to much while writing about format. For sites that are mostly documentation of some sort I find them very nice to use. Next.js makes it easy to write in markdown and then have it generate html pages during the build process.

I use the 'mdx-js' library to help with this and enable me to enhace the markdown files.

add the following libraries to your project:

    "@mdx-js/loader"
    "@next/mdx"

create or edit your next.config.js file (in the root of project) only include line 6 if also building statically:

const withMDX = require("@next/mdx")({
  extension: /\.mdx$/,
});

module.exports = withMDX({
  trailingSlash: true,
  pageExtensions: ["js", "jsx", "md", "mdx"],
});

changes to _app.js

The file _app.js in next is the start of the Reactjs building. Content here will be in all pages.

the MDXProvider is a wraper that helps format the markdown documents.

I have found it easy to use the MDXProvider to just wrap the Component inside nextjs (this Component is what includes pages)

  import { MDXProvider } from "@mdx-js/react";

  <MDXProvider components={components}>
    <Component {...pageProps} />
  </MDXProvider>