Next.js and Custom Server

Readme.md

Refs.

• Next.js

  https://nextjs.org/docs

• Next.js Custom Server

  https://nextjs.org/docs/advanced-features/custom-server

  https://blog.logrocket.com/how-to-build-a-server-rendered-react-app-with-next-express-d5a389e7ab2f/

  https://github.com/fridays/next-routes

• Eslint/Prettier (typescript)

  https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project

• Sass

  https://www.npmjs.com/package/next-dart-sass

• recoil

  https://recoiljs.org/docs/introduction/getting-started

• Preact

  https://github.com/vercel/next.js/tree/canary/examples/using-preact

• Preact Server Side

  https://github.com/developit/nextjs-preact-demo

// next.config.js

const withPreFresh = require("@prefresh/next");

module.exports = withPreFresh({
  webpack(config, { dev, isServer }) {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@styles": path.resolve(__dirname, "./styles"),
      "react": "preact/compat",
      "react-dom": "preact/compat"
    };
    // Move Preact into the framework chunk instead of duplicating in routes:
    const splitChunks = config.optimization && config.optimization.splitChunks
    if (splitChunks) {
      const cacheGroups = splitChunks.cacheGroups
      const test = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/
      if (cacheGroups.framework) {
        cacheGroups.preact = Object.assign({}, cacheGroups.framework, { test })
        // if you want to merge the 2 small commons+framework chunks:
        // cacheGroups.commons.name = "framework";
      }
    }

    // Install webpack aliases:
    const aliases = config.resolve.alias || (config.resolve.alias = {})
    aliases.react = aliases["react-dom"] = "preact/compat"

    // Automatically inject Preact DevTools:
    if (dev && !isServer) {
      const entry = config.entry
      config.entry = () =>
        entry().then((entries) => {
          entries["main.js"] = ["preact/debug"].concat(entries["main.js"] || [])
          return entries
        })
    }

    return config
  }
});

• SWR

  https://swr.now.sh/

• React-use

  https://github.com/streamich/react-use