Nextjs with Preact X!
A starter template for using Next.js with Preact X!
This starter is ready to be here:
git clone https://github.com/aomkirby123/nextjs-preactX
To migrate from existed project
We need to add next.js and preact
yarn add next preact@10 preact-render-to-string@next preact-ssr-prepass module-alias
yarn add react react-dom --dev
// or using npm
npm install next preact@10 preact-render-to-string@next preact-ssr-prepass module-alias
npm-install react react-dom --save-dev
Note: The lastest preact-render-to-string is version 4 which doesn't support Preact X while preact-render-to-string version 5 supports Preact X but is on the tags of 'next', so we specifiy the version here.
undefined
.
Otherwise, SSR result will be Wait, why do we add React here?
Next.js require React
and React DOM
to run, so we'll use a little trick.
Now create next.config.js as same level as package.json and add:
// next.config.js
const withPreact = (nextConfig = {}) => {
return Object.assign({}, nextConfig, {
webpack(config, options) {
if (!options.defaultLoaders) {
throw new Error(
"This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade"
)
}
if (options.isServer) {
config.externals = ["react", "react-dom", ...config.externals]
}
config.resolve.alias = Object.assign({}, config.resolve.alias, {
react: "preact/compat",
react$: "preact/compat",
"react-dom": "preact/compat",
"react-dom$": "preact/compat"
})
if (typeof nextConfig.webpack === "function") {
return nextConfig.webpack(config, options)
}
return config
}
})
}
module.exports = withPreact()
That's it, You're done!
Wait, what is happening here?
Aliasing React to Preact
Next.js require React
and React DOM
to be installed to run Next
but since we want to use Preact instead, we add Preact
then we add React
and React DOM
as dev dependencies
.
This make sure that the build process will NOT bundle React and React DOM.
Now we need to alias React
and React DOM
to Preact
instead.
next.config.js
Nextjs provided next.config.js
to customize the environment and loader which we can alias React and React DOM to Preact here.
The previous code will alias React
and React DOM
to Preact
and since Preact X, preact-compat
is now moved to core as preact/compat
.
Custom server with Preact
Note: This is require if you want to use a custom server with Next.js. With default with next.js next.config.js is enough.
We need module-alias
to 'alias' React
and React DOM
to Preact
, this will trick Next.js to import Preact instead of React on server since Next.js required React (but we don't actually use them).
Now, to alias we need to add this to package.json:
"_moduleAliases": {
"react": "node_modules/preact/compat",
"react-dom": "node_modules/preact/compat",
"react-ssr-prepass": "node_modules/preact-ssr-prepass"
}
and we also need to alias a custom server. Add this to top of server.js:
require('module-alias/register')
Wait, what is the meaning of this?
On Preact X
, preact-compat
come with Preact
in preact/compat
directory, so we defined preact-compat
to preact/compat
.
You might notice that we also alias react-ssr-prepass
to preact-ssr-prepass
.
The _moduleAliases
trick an import from react to preact.
Although, this is enough for running a dev server
and production server
, but it couldn't be built since Next.js does require React.
Now we add React and React DOM to dev-dependencies
, this will trick Next.js that we use React (but we actually doesn't use it), since Next.js required React and React DOM, but can only be alias on a custom server.
The reason we need to use custom server is: to ensure that module does alias to Preact correctly otherwise, we are just using React.