-
Next.js
-
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/
-
Eslint/Prettier (typescript)
https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
-
Sass
-
recoil
-
Preact
https://github.com/vercel/next.js/tree/canary/examples/using-preact
-
Preact Server Side
// 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
-
React-use