0.2.2 • Published 2 years ago
nextmix v0.2.2
NextMix
Remix and Next.js Interoperability Layer.
WIP: This is still work in progress and the source will be released once everything was stable.
- Use this package if you want your components to work both in Remix and Next.js projects.
- Don't use this package If the components that you want to share between Remix and Next.js projects don't use Next.js/Remix specific APIs/Componetns e.g.
next/router,next/image, links, meta, etc. - Don't use this package if you want to migrate from one framework to other and forget about the previous one. We suggest that you refactor your page codes one by one.
Install
Run yarn add nextmix or npm add nextmix.
Setup
You should specify the framework using an environment vairable NEXTMIX_FRAMEWORK. It can be either 'next' or 'remix'.
We rely on your minifier's dead code elimination to remove the remix specific code (Same approach used by React to not load development bundle in production).
Usage
You should refactor your code to use NextMix equivalent functions:
| NextMix | Remix | Next |
|---|---|---|
import { Link } from 'nextmix' | import { Link } from '@remix/react' | import Link from 'next/link' |
import { Image } from 'nextmix' | Not Supported | import Image from 'next/iamge' |
import { useRouter } from 'nextmix' | import { useLocation, useNavigate, useSearchParams } from '@remix-run/react' | import { useRouter } from 'next/link' |
import { withMetaTags } from 'nextmix' | export meta: MetaFunction = ...... | import { Head } from 'next/head' |
import { withLinkTags } from 'nextmix' | export links: LinksFunction = ...... | import { Head } from 'next/head' |
Next.js and Remix don't exactly support all the features of each other, so we decided to follow the following rules in designing nextmix interfaces:
- If a feature exists in one and not the other we fallback to browser default for the interface (e.g.
next/image) - For simillar features that are supported by both of them (e.g. Router) we use Next.js interface as there are more Next.js compatible components out there.
- For simillar features that are simply too hard / impossible to port we've designed a new inteface (e.g. Next.js , and )