{"_path":"/blog/next_js_vs_remix","_draft":false,"_partial":false,"_empty":false,"title":"Next.js vs. Remix.","description":"Nowadays, a new React framework is no news. It seems like they are multiplying each day, so why are we focusing on Remix and Next.js today?","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"nextjs-vs-remix"},"children":[{"type":"text","value":"Next.js vs. Remix"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nowadays, a new React framework is no news. It seems like they are multiplying each day, so why are we focusing on Remix and Next.js today? Well, Next.js is definitely the most popular choice for building SSR and SSG React applications, and Remix might be the next developer's favorite React framework. They have a lot in common and a lot more differences."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this article we will talk about:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#story-of-the-two"},"children":[{"type":"text","value":"Story of the two frameworks"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#nextjs"},"children":[{"type":"text","value":"Next.js"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#remix"},"children":[{"type":"text","value":"Remix"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#comparison-of-remix-and-nextjs"},"children":[{"type":"text","value":"Comparison of Next.js and Remix"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#routing"},"children":[{"type":"text","value":"Routing"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#nested-routes"},"children":[{"type":"text","value":"Nested Routes"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#dynamic-routes"},"children":[{"type":"text","value":"Dynamic Routes"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#data-loading"},"children":[{"type":"text","value":"Data Loading"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#sessions-and-cookies"},"children":[{"type":"text","value":"Sessions and Cookies"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#working-with-forms"},"children":[{"type":"text","value":"Working with Forms"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#styling"},"children":[{"type":"text","value":"Styling"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#seo"},"children":[{"type":"text","value":"SEO"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#other-comparisons"},"children":[{"type":"text","value":"Other Comparisons"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#conclusion"},"children":[{"type":"text","value":"Conclusion"}]}]}]},{"type":"element","tag":"h2","props":{"id":"story-of-the-two"},"children":[{"type":"text","value":"Story of the two"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To better understand the competition between the two, let's first look into their story."}]},{"type":"element","tag":"h3","props":{"id":"nextjs"},"children":[{"type":"text","value":"Next.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next.js was first released as an open-source project on GitHub on October 25, 2016. It is a project of the Vercel (ex-ZEIT) company. Google has donated to the Next.js project, contributing 43 pull requests in 2019, where they helped in pruning unused JavaScript, reducing the loading time, and adding improved metrics. As of March 2020, the framework is used by many large websites, including Netflix, GitHub, Uber, Ticketmaster, and Starbucks. As of now, 12 major versions of the framework were released. Next.js has 86.5k stars on GitHub and 2,541,419 weekly downloads."}]},{"type":"element","tag":"h3","props":{"id":"remix"},"children":[{"type":"text","value":"Remix"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Remix is a framework which was made by the same people, who made React Router. Remix's earliest commits on GitHub are dated to early July of 2020. It wasn't open-source from the start, but the strategy changed in late 2021 when Remix became fully open-source. Even though Remix is a relatively new framework, because of its core principles and ideas, it showed great growth in popularity. Remix has 16.2k likes on GitHub and 20,858 weekly downloads."}]},{"type":"element","tag":"h1","props":{"id":"comparison-of-remix-and-nextjs"},"children":[{"type":"text","value":"Comparison of Remix and Next.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Remix and Next.js are both React frameworks, that allow you to do server-side rendering, which means that both backend and frontend are implemented in the same application. Render happens on the side of a server and the pages are sent to the client with minimal use of JavaScript. However, by the time of writing, Remix doesn't support static site generation."}]},{"type":"element","tag":"h2","props":{"id":"routing"},"children":[{"type":"text","value":"Routing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The routing system might seem similar at the first glance, but it isn't. What's similar is the file-based routing, where every file in a specific folder is treated as a new route. This specific folder is routes in Remix and pages in Next.js."}]},{"type":"element","tag":"h4","props":{"id":"nextjs-1"},"children":[{"type":"text","value":"Next.js"}]},{"type":"element","tag":"code","props":{"code":"- pages\n  - index.js\n  - new-route.js\n  - _app.js\n  ...\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"- pages\n  - index.js\n  - new-route.js\n  - _app.js\n  ...\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"remix-1"},"children":[{"type":"text","value":"Remix"}]},{"type":"element","tag":"code","props":{"code":"- app\n  - routes\n    - index.js\n    - new-route.js\n    ...\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"- app\n  - routes\n    - index.js\n    - new-route.js\n    ...\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"nested-routes"},"children":[{"type":"text","value":"Nested Routes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Because Remix is built on top of React Router, Remix allows you to do nested routing with ease."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It comes with a very powerful route nesting mechanism that can nest other routes in a currently active route to create what would be considered a nested layout of routes. They act like children components that can be mounted or unmounted depending on the currently active URL path."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This nesting is achievable using an Outlet component. The Outlet component is the key to nested routing in Remix as it is used to tell a parent route where to mount a nested child route. Using the Outlet component, you could easily build a hierarchy of deeply nested routes to create a complex nested layout. Through nested routes, Remix can eliminate nearly every loading state as these nested routes are preloaded on the server, creating almost a hybrid of SPA and SSR."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next.js comes with its own router and has support for nested routes but it’s not as easy to achieve a nested routes layout as in Remix."}]},{"type":"element","tag":"h3","props":{"id":"dynamic-routes"},"children":[{"type":"text","value":"Dynamic Routes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both Remix and Next.js have support for dynamic routing but have different naming conventions to create one."}]},{"type":"element","tag":"h4","props":{"id":"nextjs-2"},"children":[{"type":"text","value":"Next.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Next.js it’s created using pair of square brackets with the dynamic param’s name inside."}]},{"type":"element","tag":"code","props":{"code":"pages/post/[postid].js\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"pages/post/[postid].js\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useRouter"}]},{"type":"text","value":" hook provided by Next.js, the URL query param can be gotten."}]},{"type":"element","tag":"h4","props":{"id":"remix-2"},"children":[{"type":"text","value":"Remix"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Remix, to create a dynamic route you should start the name of the dynamic route with a dollar sign."}]},{"type":"element","tag":"code","props":{"code":"routes/post/$postid.jsx\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"routes/post/$postid.jsx\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And because Remix is based on React Router, the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useParam"}]},{"type":"text","value":" hook can be used to access the URL param."}]},{"type":"element","tag":"h2","props":{"id":"data-loading"},"children":[{"type":"text","value":"Data Loading"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will only talk about SSR here, because, as said above, Remix doesn't support server-side generation (SSG) option."}]},{"type":"element","tag":"h4","props":{"id":"nextjs-3"},"children":[{"type":"text","value":"Next.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Next.js we have a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getServerSideProps"}]},{"type":"text","value":" function, which does the job of loading data on a server, sending it to a React component and rendering it with the data. This data is sent via props."}]},{"type":"element","tag":"code","props":{"code":"export const getServerSideProps = async ({ params, query }) => { \n  // abstract API calls\n  const userData = await API.getUser(params.id);\n  const { id, name } = userData;\n  return {props: { id, name }}\n};\n\nexport default function UserPage(props) { \n  return ( \n      <> \n        <p> User ID: {props.id} </p>\n        <p> User Name: {props.name} </p> \n      </> \n  );\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export const getServerSideProps = async ({ params, query }) => { \n  // abstract API calls\n  const userData = await API.getUser(params.id);\n  const { id, name } = userData;\n  return {props: { id, name }}\n};\n\nexport default function UserPage(props) { \n  return ( \n      <> \n        <p> User ID: {props.id} </p>\n        <p> User Name: {props.name} </p> \n      </> \n  );\n}\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"remix-3"},"children":[{"type":"text","value":"Remix"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Remix, however, we have a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useLoaderData"}]},{"type":"text","value":" hook and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"loader"}]},{"type":"text","value":" function, which do the job for us and don't mix client props with server props. Loader function is an equivalent to Next.js "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getServerSideProps"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"import { useLoaderData } from \"remix\"; \n\nexport const loader = async ({ params, request }) => { \n  // abstract API calls\n  const userData = await API.getUser(params.id);\n  const { id, name } = userData;\n  return { id, name };\n}; \n\nexport default function FirstPage() { \n  const { id, name } = useLoaderData();\n  return ( \n        <> \n          <p> User ID: {id} </p> \n          <p> User Name: {name} </p> \n        </> \n  );\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useLoaderData } from \"remix\"; \n\nexport const loader = async ({ params, request }) => { \n  // abstract API calls\n  const userData = await API.getUser(params.id);\n  const { id, name } = userData;\n  return { id, name };\n}; \n\nexport default function FirstPage() { \n  const { id, name } = useLoaderData();\n  return ( \n        <> \n          <p> User ID: {id} </p> \n          <p> User Name: {name} </p> \n        </> \n  );\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"sessions-and-cookies"},"children":[{"type":"text","value":"Sessions and Cookies"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are no built-in tools to interact with cookies or sessions in Next.js. You can use a library for that like Cookie.js or NextAuth.js, which would solve your problem."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Remix, you get full support for cookies and sessions out of the box. You can generate a cookie by calling a function, then serialize or parse data to store or read it."}]},{"type":"element","tag":"code","props":{"code":"import { createCookie } from \"remix\";\n\nconst cookie = createCookie(\"user\", {\n  expires: new Date(Date.now() + 60),\n  httpOnly: true,\n  maxAge: 60,\n  path: \"/\",\n  sameSite: \"lax\",\n  secrets: [\"1s2e3c4r5e6t\"],\n  secure: true\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { createCookie } from \"remix\";\n\nconst cookie = createCookie(\"user\", {\n  expires: new Date(Date.now() + 60),\n  httpOnly: true,\n  maxAge: 60,\n  path: \"/\",\n  sameSite: \"lax\",\n  secrets: [\"1s2e3c4r5e6t\"],\n  secure: true\n});\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"working-with-forms"},"children":[{"type":"text","value":"Working with Forms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Working with forms is a pain in React. And Next.js is not much different from React when it comes to forms. You would need to implement everything yourself or use a library."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Remix's approach is different and took a lot from the way browsers handle forms natively. All you need to get a form working in Remix is to either use the traditional HTML form tag or import a Form component (both work the same) and set up a form with an HTTP request method set to POST or GET, then enter an action URL to send the data to - which by default will be the same as the route for the form. If the method is set to GET, Remix will execute any export loader function defined in the component, but if the method is POST, Remix will execute any export action function defined in the component."}]},{"type":"element","tag":"code","props":{"code":"export const action = async ({ request }) => {\n  const form = await request.formData();\n  const content = form.get('description');\n  return redirect('/');\n}\n\nexport default function DescriptionForm() {\n  return (\n      <Form method=\"POST\">\n        <label htmlFor=\"description\">\n          Description: <textarea name=\"description\" />\n        </label>\n        <input type=\"submit\" value=\"Add New\" />\n      </Form>\n  )\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export const action = async ({ request }) => {\n  const form = await request.formData();\n  const content = form.get('description');\n  return redirect('/');\n}\n\nexport default function DescriptionForm() {\n  return (\n      <Form method=\"POST\">\n        <label htmlFor=\"description\">\n          Description: <textarea name=\"description\" />\n        </label>\n        <input type=\"submit\" value=\"Add New\" />\n      </Form>\n  )\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"styling"},"children":[{"type":"text","value":"Styling"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next.js supports "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"styled-jsx"}]},{"type":"text","value":" as a CSS-in-JS solution by default. It also has built-in support for CSS modules and Vanilla CSS out of the box. You can also add any other styling library, like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"styled-components"}]},{"type":"text","value":", with a few lines of configurations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary way to style in Remix is by linking to traditional CSS style sheets placed in the “styles” directory by exporting a Links function in a component. The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Links/>"}]},{"type":"text","value":" function is used to inject whatever stylesheet which needs to be loaded for a specific route module and the styles are fetched in parallel when loading the route. This stylesheet is then automatically removed when we leave the route to optimize the amount of CSS you’re sending per page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As a result, styling in Remix boils down to using CSS files that can be attached to the website via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<link rel=\"stylesheet\">"}]},{"type":"text","value":". There’s support for CSS frameworks and libraries right out of the box, but not those that require bundler or compiler integration. Only those that can generate actual CSS files that can be linked to your remix application. Additionally, Remix supports runtime CSS frameworks like styled-components, which are evaluated at runtime but need no bundler integration."}]},{"type":"element","tag":"h2","props":{"id":"seo"},"children":[{"type":"text","value":"SEO"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Next.js, you can achieve a better SEO by importing the built-in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"next/head"}]},{"type":"text","value":" as a  component into your pages or routes and then use it to define all the various meta info needed for that page inside this ‘head’ component as direct children."}]},{"type":"element","tag":"code","props":{"code":"import Head from 'next/head'\n\nexport default function Page() {\n  return (\n    <div>\n      <Head>\n        <title>Page Title</title>\n        <meta name=\"description\" content=\"Page description\" />\n      </Head>\n      ...\n    </div>\n  )\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import Head from 'next/head'\n\nexport default function Page() {\n  return (\n    <div>\n      <Head>\n        <title>Page Title</title>\n        <meta name=\"description\" content=\"Page description\" />\n      </Head>\n      ...\n    </div>\n  )\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Remix you would use a special "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Meta"}]},{"type":"text","value":" component inside of a page's  tag."}]},{"type":"element","tag":"code","props":{"code":"import { Meta } from 'remix'\n\nexport const meta = () => {\n  return {\n    title: 'Page Title',\n    description: 'Page Description'\n  }\n}\n\nexport default function Page() {\n  return (\n    <html>\n      <head>\n        <Meta />\n      </head>\n      <body>\n        ...\n      </body>\n    </html>\n  )\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Meta } from 'remix'\n\nexport const meta = () => {\n  return {\n    title: 'Page Title',\n    description: 'Page Description'\n  }\n}\n\nexport default function Page() {\n  return (\n    <html>\n      <head>\n        <Meta />\n      </head>\n      <body>\n        ...\n      </body>\n    </html>\n  )\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"other-comparisons"},"children":[{"type":"text","value":"Other Comparisons"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Next.js"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Remix"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Image Optimization"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"✅"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"❌"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Google AMP"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"✅"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"❌"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"TypeScript Support"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"✅"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"✅"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Internationalized Routing"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"✅"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"❌"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Summarizing everything above, I can definitely say that Remix is a great framework, yet, it is a little early to take it to production. Despite that, it is always great to have a competition when it comes to frameworks and Remix is a perfect competitor for Next.js. To understand if Remix is a good option for your project, I would highly recommend you to read "},{"type":"element","tag":"a","props":{"href":"https://remix.run/blog/remix-vs-next","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"this article"}]},{"type":"text","value":" by Remix's Co-Founder Ryan Florence, who is talking about performance differences between Next.js and Remix."}]}]},"topic":"Next.js","createdAt":1655420400000,"category":"Web development","image":"/blog/next.js_vs_remix/next.js_vs_remix.png","head":{"image":"/blog/next.js_vs_remix/next.js_vs_remix.png"},"alt":"Next.js vs. Remix.","author":{"name":"Daniil Krutogolov","bio":"Front-end Developer","img":"/blog/authors/daniil.webp"},"tags":["Next.js","Remix"],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"nextjs-vs-remix"},"children":[{"type":"text","value":"Next.js vs. Remix"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nowadays, a new React framework is no news. It seems like they are multiplying each day, so why are we focusing on Remix and Next.js today? Well, Next.js is definitely the most popular choice for building SSR and SSG React applications, and Remix might be the next developer's favorite React framework. They have a lot in common and a lot more differences."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this article we will talk about:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#story-of-the-two"},"children":[{"type":"text","value":"Story of the two frameworks"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#nextjs"},"children":[{"type":"text","value":"Next.js"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#remix"},"children":[{"type":"text","value":"Remix"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#comparison-of-remix-and-nextjs"},"children":[{"type":"text","value":"Comparison of Next.js and Remix"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#routing"},"children":[{"type":"text","value":"Routing"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#nested-routes"},"children":[{"type":"text","value":"Nested Routes"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#dynamic-routes"},"children":[{"type":"text","value":"Dynamic Routes"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#data-loading"},"children":[{"type":"text","value":"Data Loading"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#sessions-and-cookies"},"children":[{"type":"text","value":"Sessions and Cookies"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#working-with-forms"},"children":[{"type":"text","value":"Working with Forms"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#styling"},"children":[{"type":"text","value":"Styling"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#seo"},"children":[{"type":"text","value":"SEO"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#other-comparisons"},"children":[{"type":"text","value":"Other Comparisons"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#conclusion"},"children":[{"type":"text","value":"Conclusion"}]}]}]},{"type":"element","tag":"h2","props":{"id":"story-of-the-two"},"children":[{"type":"text","value":"Story of the two"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To better understand the competition between the two, let's first look into their story."}]},{"type":"element","tag":"h3","props":{"id":"nextjs"},"children":[{"type":"text","value":"Next.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next.js was first released as an open-source project on GitHub on October 25, 2016. It is a project of the Vercel (ex-ZEIT) company. Google has donated to the Next.js project, contributing 43 pull requests in 2019, where they helped in pruning unused JavaScript, reducing the loading time, and adding improved metrics. As of March 2020, the framework is used by many large websites, including Netflix, GitHub, Uber, Ticketmaster, and Starbucks. As of now, 12 major versions of the framework were released. Next.js has 86.5k stars on GitHub and 2,541,419 weekly downloads."}]},{"type":"element","tag":"h3","props":{"id":"remix"},"children":[{"type":"text","value":"Remix"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Remix is a framework which was made by the same people, who made React Router. Remix's earliest commits on GitHub are dated to early July of 2020. It wasn't open-source from the start, but the strategy changed in late 2021 when Remix became fully open-source. Even though Remix is a relatively new framework, because of its core principles and ideas, it showed great growth in popularity. Remix has 16.2k likes on GitHub and 20,858 weekly downloads."}]},{"type":"element","tag":"h1","props":{"id":"comparison-of-remix-and-nextjs"},"children":[{"type":"text","value":"Comparison of Remix and Next.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Remix and Next.js are both React frameworks, that allow you to do server-side rendering, which means that both backend and frontend are implemented in the same application. Render happens on the side of a server and the pages are sent to the client with minimal use of JavaScript. However, by the time of writing, Remix doesn't support static site generation."}]},{"type":"element","tag":"h2","props":{"id":"routing"},"children":[{"type":"text","value":"Routing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The routing system might seem similar at the first glance, but it isn't. What's similar is the file-based routing, where every file in a specific folder is treated as a new route. This specific folder is routes in Remix and pages in Next.js."}]},{"type":"element","tag":"h4","props":{"id":"nextjs-1"},"children":[{"type":"text","value":"Next.js"}]},{"type":"element","tag":"code","props":{"code":"- pages\n  - index.js\n  - new-route.js\n  - _app.js\n  ...\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"- pages\n  - index.js\n  - new-route.js\n  - _app.js\n  ..."}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"remix-1"},"children":[{"type":"text","value":"Remix"}]},{"type":"element","tag":"code","props":{"code":"- app\n  - routes\n    - index.js\n    - new-route.js\n    ...\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"- app\n  - routes\n    - index.js\n    - new-route.js\n    ..."}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"nested-routes"},"children":[{"type":"text","value":"Nested Routes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Because Remix is built on top of React Router, Remix allows you to do nested routing with ease."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It comes with a very powerful route nesting mechanism that can nest other routes in a currently active route to create what would be considered a nested layout of routes. They act like children components that can be mounted or unmounted depending on the currently active URL path."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This nesting is achievable using an Outlet component. The Outlet component is the key to nested routing in Remix as it is used to tell a parent route where to mount a nested child route. Using the Outlet component, you could easily build a hierarchy of deeply nested routes to create a complex nested layout. Through nested routes, Remix can eliminate nearly every loading state as these nested routes are preloaded on the server, creating almost a hybrid of SPA and SSR."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next.js comes with its own router and has support for nested routes but it’s not as easy to achieve a nested routes layout as in Remix."}]},{"type":"element","tag":"h3","props":{"id":"dynamic-routes"},"children":[{"type":"text","value":"Dynamic Routes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both Remix and Next.js have support for dynamic routing but have different naming conventions to create one."}]},{"type":"element","tag":"h4","props":{"id":"nextjs-2"},"children":[{"type":"text","value":"Next.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Next.js it’s created using pair of square brackets with the dynamic param’s name inside."}]},{"type":"element","tag":"code","props":{"code":"pages/post/[postid].js\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"pages/post/[postid].js"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useRouter"}]},{"type":"text","value":" hook provided by Next.js, the URL query param can be gotten."}]},{"type":"element","tag":"h4","props":{"id":"remix-2"},"children":[{"type":"text","value":"Remix"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Remix, to create a dynamic route you should start the name of the dynamic route with a dollar sign."}]},{"type":"element","tag":"code","props":{"code":"routes/post/$postid.jsx\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{}},"children":[{"type":"text","value":"routes/post/$postid.jsx"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And because Remix is based on React Router, the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useParam"}]},{"type":"text","value":" hook can be used to access the URL param."}]},{"type":"element","tag":"h2","props":{"id":"data-loading"},"children":[{"type":"text","value":"Data Loading"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We will only talk about SSR here, because, as said above, Remix doesn't support server-side generation (SSG) option."}]},{"type":"element","tag":"h4","props":{"id":"nextjs-3"},"children":[{"type":"text","value":"Next.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Next.js we have a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getServerSideProps"}]},{"type":"text","value":" function, which does the job of loading data on a server, sending it to a React component and rendering it with the data. This data is sent via props."}]},{"type":"element","tag":"code","props":{"code":"export const getServerSideProps = async ({ params, query }) => { \n  // abstract API calls\n  const userData = await API.getUser(params.id);\n  const { id, name } = userData;\n  return {props: { id, name }}\n};\n\nexport default function UserPage(props) { \n  return ( \n      <> \n        <p> User ID: {props.id} </p>\n        <p> User Name: {props.name} </p> \n      </> \n  );\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"getServerSideProps"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ({ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"params"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" { "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// abstract API calls"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"userData"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"API"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"getUser"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(params.id);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" userData;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {props: { id, name }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"UserPage"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"(props) "}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"{ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ( "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      <> "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"> User ID: {props.id} </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"> User Name: {props.name} </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"> "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      </> "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"remix-3"},"children":[{"type":"text","value":"Remix"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Remix, however, we have a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useLoaderData"}]},{"type":"text","value":" hook and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"loader"}]},{"type":"text","value":" function, which do the job for us and don't mix client props with server props. Loader function is an equivalent to Next.js "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getServerSideProps"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"import { useLoaderData } from \"remix\"; \n\nexport const loader = async ({ params, request }) => { \n  // abstract API calls\n  const userData = await API.getUser(params.id);\n  const { id, name } = userData;\n  return { id, name };\n}; \n\nexport default function FirstPage() { \n  const { id, name } = useLoaderData();\n  return ( \n        <> \n          <p> User ID: {id} </p> \n          <p> User Name: {name} </p> \n        </> \n  );\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" { useLoaderData } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"remix\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"; "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ({ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"params"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" { "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// abstract API calls"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"userData"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"API"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"getUser"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(params.id);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" userData;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" { id, name };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}; "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"FirstPage"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"{ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"useLoaderData"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ( "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        <> "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"          <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"> User ID: {id} </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"> "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"          <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"> User Name: {name} </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"> "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        </> "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"sessions-and-cookies"},"children":[{"type":"text","value":"Sessions and Cookies"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are no built-in tools to interact with cookies or sessions in Next.js. You can use a library for that like Cookie.js or NextAuth.js, which would solve your problem."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Remix, you get full support for cookies and sessions out of the box. You can generate a cookie by calling a function, then serialize or parse data to store or read it."}]},{"type":"element","tag":"code","props":{"code":"import { createCookie } from \"remix\";\n\nconst cookie = createCookie(\"user\", {\n  expires: new Date(Date.now() + 60),\n  httpOnly: true,\n  maxAge: 60,\n  path: \"/\",\n  sameSite: \"lax\",\n  secrets: [\"1s2e3c4r5e6t\"],\n  secure: true\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" { createCookie } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"remix\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"cookie"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"createCookie"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"user\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  expires: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"Date"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"Date"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"now"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"60"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  httpOnly: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  maxAge: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"60"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  path: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"/\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  sameSite: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"lax\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  secrets: ["}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"1s2e3c4r5e6t\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  secure: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"});"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"working-with-forms"},"children":[{"type":"text","value":"Working with Forms"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Working with forms is a pain in React. And Next.js is not much different from React when it comes to forms. You would need to implement everything yourself or use a library."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Remix's approach is different and took a lot from the way browsers handle forms natively. All you need to get a form working in Remix is to either use the traditional HTML form tag or import a Form component (both work the same) and set up a form with an HTTP request method set to POST or GET, then enter an action URL to send the data to - which by default will be the same as the route for the form. If the method is set to GET, Remix will execute any export loader function defined in the component, but if the method is POST, Remix will execute any export action function defined in the component."}]},{"type":"element","tag":"code","props":{"code":"export const action = async ({ request }) => {\n  const form = await request.formData();\n  const content = form.get('description');\n  return redirect('/');\n}\n\nexport default function DescriptionForm() {\n  return (\n      <Form method=\"POST\">\n        <label htmlFor=\"description\">\n          Description: <textarea name=\"description\" />\n        </label>\n        <input type=\"submit\" value=\"Add New\" />\n      </Form>\n  )\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"action"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ({ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"form"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" request."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"formData"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" form."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'description'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"redirect"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'/'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"DescriptionForm"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"Form"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"POST\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"htmlFor"}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"description\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"          Description: <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"textarea"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"description\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"submit\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"Add New\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"Form"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"styling"},"children":[{"type":"text","value":"Styling"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next.js supports "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"styled-jsx"}]},{"type":"text","value":" as a CSS-in-JS solution by default. It also has built-in support for CSS modules and Vanilla CSS out of the box. You can also add any other styling library, like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"styled-components"}]},{"type":"text","value":", with a few lines of configurations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary way to style in Remix is by linking to traditional CSS style sheets placed in the “styles” directory by exporting a Links function in a component. The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<Links/>"}]},{"type":"text","value":" function is used to inject whatever stylesheet which needs to be loaded for a specific route module and the styles are fetched in parallel when loading the route. This stylesheet is then automatically removed when we leave the route to optimize the amount of CSS you’re sending per page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As a result, styling in Remix boils down to using CSS files that can be attached to the website via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<link rel=\"stylesheet\">"}]},{"type":"text","value":". There’s support for CSS frameworks and libraries right out of the box, but not those that require bundler or compiler integration. Only those that can generate actual CSS files that can be linked to your remix application. Additionally, Remix supports runtime CSS frameworks like styled-components, which are evaluated at runtime but need no bundler integration."}]},{"type":"element","tag":"h2","props":{"id":"seo"},"children":[{"type":"text","value":"SEO"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Next.js, you can achieve a better SEO by importing the built-in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"next/head"}]},{"type":"text","value":" as a  component into your pages or routes and then use it to define all the various meta info needed for that page inside this ‘head’ component as direct children."}]},{"type":"element","tag":"code","props":{"code":"import Head from 'next/head'\n\nexport default function Page() {\n  return (\n    <div>\n      <Head>\n        <title>Page Title</title>\n        <meta name=\"description\" content=\"Page description\" />\n      </Head>\n      ...\n    </div>\n  )\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" Head "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'next/head'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"Page"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"Head"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">Page Title</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"description\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"\"Page description\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"Head"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Remix you would use a special "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Meta"}]},{"type":"text","value":" component inside of a page's  tag."}]},{"type":"element","tag":"code","props":{"code":"import { Meta } from 'remix'\n\nexport const meta = () => {\n  return {\n    title: 'Page Title',\n    description: 'Page Description'\n  }\n}\n\nexport default function Page() {\n  return (\n    <html>\n      <head>\n        <Meta />\n      </head>\n      <body>\n        ...\n      </body>\n    </html>\n  )\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" { Meta } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'remix'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    title: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'Page Title'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    description: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'Page Description'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"Page"}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"html"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"head"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"Meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"head"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"        ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#116329"}},"children":[{"type":"text","value":"html"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"other-comparisons"},"children":[{"type":"text","value":"Other Comparisons"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Next.js"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Remix"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Image Optimization"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"✅"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"❌"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Google AMP"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"✅"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"❌"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"TypeScript Support"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"✅"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"✅"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Internationalized Routing"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"✅"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"❌"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Summarizing everything above, I can definitely say that Remix is a great framework, yet, it is a little early to take it to production. Despite that, it is always great to have a competition when it comes to frameworks and Remix is a perfect competitor for Next.js. To understand if Remix is a good option for your project, I would highly recommend you to read "},{"type":"element","tag":"a","props":{"href":"https://remix.run/blog/remix-vs-next","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"this article"}]},{"type":"text","value":" by Remix's Co-Founder Ryan Florence, who is talking about performance differences between Next.js and Remix."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"story-of-the-two","depth":2,"text":"Story of the two","children":[{"id":"nextjs","depth":3,"text":"Next.js"},{"id":"remix","depth":3,"text":"Remix"}]},{"id":"routing","depth":2,"text":"Routing","children":[{"id":"nested-routes","depth":3,"text":"Nested Routes"},{"id":"dynamic-routes","depth":3,"text":"Dynamic Routes"}]},{"id":"data-loading","depth":2,"text":"Data Loading"},{"id":"sessions-and-cookies","depth":2,"text":"Sessions and Cookies"},{"id":"working-with-forms","depth":2,"text":"Working with Forms"},{"id":"styling","depth":2,"text":"Styling"},{"id":"seo","depth":2,"text":"SEO"},{"id":"other-comparisons","depth":2,"text":"Other Comparisons"},{"id":"conclusion","depth":2,"text":"Conclusion"}]}},"_type":"markdown","_id":"content:blog:NEXT_JS_vs_REMIX.md","_source":"content","_file":"blog/NEXT_JS_vs_REMIX.md","_extension":"md"}