What is Next.js?
Next.js is based on react, webpack and babel. It is an awesome tool for creating web application and famous for server-side rendering. Next.js is build by Zeit. Developers with knowledge of HTML, CSS, Java Script and React can easily learn and switch to next.js.
What is Remix?
Remix is a full stack web framework based on web fundamentals and modern UX. It was created by the Remix.run team, founded by Ryan Florence and Michael Jackson. They are the creators of React Router.
Remix is a seamless server and browser runtime. It has no static site support, and always relies on a server. Remix aims to provide fast page load times and instant UI transitions.
Remix is built on the Web Fetch API, which allows it to run anywhere. It can be deployed in a serverless environment or in a Node.js server environment.
Difference Between Next.js and Remix
In Next.js, they have their own router using the file system, so you create a pages folder and put files there
In Remix, they use React Router v6 internally but they provide a file system based system, instead of pages Remix call them routes, but the general is similar
Data Loading Strategies
In Next you can use all of them with different functions you can export from a page file.
In Remix, they support only two strategies, server-side at runtime and client-side at runtime.
Cookies and Sessions
In Next.js, you don't have anything special built-in to work with cookies or session, there are popular libraries like Cookie.js which can work with Next or NextAuth.js to do user authentication and store some session data in a cookie.
Remix comes with cookies and sessions support out of the box, you can create a cookie calling a function and then serialize data to store there or parse data to read it.
Next.js can be deployed to any server where you can run Node.js by doing next build && next start, additionally it has built-in integration to run in serverless mode when deploying to Vercel, and the Netlify team created an adapter to deploy to their service in serverless mode.
Remix was create with the idea to be deployable to any platform, and be integrated anywhere, that's why Remix is a request handler inside an HTTP server, so you can use any server.
Next.js comes with Styled-jsx as default CSS in JS solution and you can also use CSS Modules out of the box, any other framework or CSS in JS library can be added with some configuration
In Remix, any CSS should be loaded with <link> tag because that helps with cacheability and you can use media queries to load or not stylesheet based on that. And while CSS in JS still possible if the library needs some compiler plugin it will not be usable since it's not possible to change the compiler.
Next.js has built-in support for internationalized routing and can use popular libraries for content i18n.
Remix doesn't has built-in support for internationalized routing, however thank to the possibility to completely replace file system routing with something custom it's possible to add it.
Next.js has built-in automatic image optimization support when using the next/image component.
Remix lets you import images and get a URL back or use the img: prefix in the import path and get the image URL and perform some simple transformation, algo get multiple URLs to use in srcset, a placeholder URL and change the quality.
Next.js lets you define some special pages for 500, 404 and any error, then renders that in case of an error.
Remix lets you export an ErrorBoundary component inside any route module which will handle any error of that specific route. If a route is nested it will only handle errors on that part, the parent route will continue to work.
Live Reload vs Fash Refresh
Next.js has support for React Fash Refresh wich will update your components as you save files without reloading the whole page and losing UI state.
Remix has support to enable Live Reload (not enabled by default) which will reload the page as you save files. This will cause the UI state to be lost but will allow you to easily see updates on loaders. Fast Refresh support is coming.
Next.js is zero config by default, you can still customize the webpack and Babel if needed, together with other parts of the internal stack.
Remix is also zero config by default, it comes with everything you need to run it after installing it.
Next.js comes with .env support out of the box, it also has a convention to prefix environment variables you want to expose to the client-side code. There's additionally a way to avoid the convention and manually expose a variable.
Remix doesn't comes with .env support out of the box too, and it exposes process.env.NODE_ENV to the client-side code, it has a guide in the docs on their recommended approach to expose environment variables to the client. Adding .env support is rather simple by using the dotenv package.
Next.js automatically polyfill fetch, Object.assign and URL in servers so you can use it inside API routes, getStaticProps, getStaticPaths and getServerSideProps.
Remix automatically polyfill fetch in the server so you can use it inside your loaders and actions.
The Tech Platform