Last reviewed November 3, 2026

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

Main Site

Next is maintained by Vercel ™️ 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.

npx create-next-app@latest

Basic layout

This is the layout using the Pages Router, which is what this site uses. New projects default to the App Router, which uses an app/ directory in place of pages/.

-- 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.

The old next export command was removed in Next.js 14. Instead, set the output mode in next.config.js and next build will generate the static site.

module.exports = {
  output: "export",
};

The output of this will be in the '/out/' directory which can then be copied to your server site. Features that need a running server, such as redirects and rewrites, won't work in a static export. See the static exports guide for the full list.

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"
    "@mdx-js/react"
    "@next/mdx"

create or edit your next.config.js file (in the root of project) only include the output and trailingSlash lines if also building statically:

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

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

This is the setup this site uses with the Pages Router. Next.js 16 builds with Turbopack by default and this site's older MDX setup needs webpack, so its scripts run next dev --webpack and next build --webpack. The official MDX guide covers the current setup for new projects.

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>