(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[171],{3359:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/getstarted",function(){return r(6640)}])},6640:function(e,t,r){"use strict";r.r(t);var o=r(5893),s=r(7294),n=r(1664),i=r.n(n);let l=()=>{let[e,t]=(0,s.useState)(!0),r=()=>{e?t(!1):t(!0)};return(0,o.jsx)("div",{className:"max-w-[1248px] w-full h-full mx-auto flex flex-col py-40 overflow-hidden",children:(0,o.jsxs)("div",{className:"flex flex-col p-32",children:[(0,o.jsxs)("div",{children:[(0,o.jsx)("h1",{className:"text-4xl text-center",children:"Get Started"}),(0,o.jsx)("br",{}),(0,o.jsxs)("p",{children:["This is a practical guide to getting started with Next2o. If you want to learn more about how our product works, head over to the ",(0,o.jsx)(i(),{className:"text-blue-400 hover:underline",href:"/docs",children:"docs"}),". This guide will show you how to set up and use Next2o:"]}),(0,o.jsx)("br",{}),(0,o.jsxs)("ol",{className:"text-lg font-bold list-decimal flex flex-col items-start justify-center p-10",children:[(0,o.jsx)("li",{children:"Download our extension from the Chrome store."}),(0,o.jsx)("br",{}),(0,o.jsx)("p",{hidden:!0,children:e?Date.now():"No more error!"}),(0,o.jsx)("li",{children:"Make sure you're on the tab you'd like to check."}),(0,o.jsx)("br",{}),(0,o.jsx)("li",{children:"Click on the extension to open."}),(0,o.jsx)("br",{}),(0,o.jsx)("li",{children:"Optional: Login to save performance metrics."}),(0,o.jsx)("br",{}),(0,o.jsx)("li",{children:"Hit the 'debug' button to check for errors."}),(0,o.jsx)("br",{}),(0,o.jsx)("li",{children:"If there are DOM nodes with errors, they'll appear in red."}),(0,o.jsx)("br",{}),(0,o.jsx)("li",{children:"To check performance metrics, hit the 'performance' tab."}),(0,o.jsx)("br",{}),(0,o.jsx)("li",{children:"Click the 'check performance' button. If you're logged in, the results are automatically saved to your account."}),(0,o.jsx)("br",{}),(0,o.jsx)("li",{children:"Check out your performance metrics and view tips for improving performance. If you want to learn how we generate these numbers, head over to the docs."})]})]}),(0,o.jsxs)("div",{children:[(0,o.jsx)("h1",{className:"text-4xl font-bold text-center mt-16",children:"Demo"}),(0,o.jsx)("br",{}),(0,o.jsx)("h2",{className:"text-2xl font-semibold text-center mt-6",children:"Use the debugger"}),(0,o.jsx)("br",{}),(0,o.jsx)("p",{children:"Test our extension on this page with a treasure hunt! We've created a hydration error in the page somewhere, see if you can find it!"}),(0,o.jsx)("br",{}),(0,o.jsx)("h2",{className:"text-2xl font-semibold text-center mt-6",children:"See how hydration changes performance"}),(0,o.jsx)("br",{}),(0,o.jsx)("p",{children:"Open the extension and navigate to the 'performance' tab. Then, run a performance test. Click the button below to remove the hydration error from the page, then run the performance test to see the difference it makes."}),(0,o.jsx)("br",{}),(0,o.jsx)("div",{className:"flex justify-center",children:(0,o.jsx)("button",{className:"border-2 border-black w-max-fit p-4 rounded-md hover:bg-cyan-400",onClick:r,children:"Remove hydration error"})})]})]})})};t.default=l}},function(e){e.O(0,[774,888,179],function(){return e(e.s=3359)}),_N_E=e.O()}]);