Getting Started with Next.js - Delba de Oliveira - (Next.js Conf 2021)

we previously explored how to get started with react now we will discuss how we can get started with nexjs in this section we will cover how we can go from a react application to nexus pages routing and navigation pre-rendering and data fetching and styling applications but before diving into the next.js features we just mentioned let's see how we can move from a simple react application to nexus so going back to our react example let's see how we can migrate this simple example to next.js first we don't need to load the react and react dom scripts from unpackaged.com anymore instead we will install them locally using node package manager or npm to do so let's create a new file called package.json with an empty object in our terminal let's run npm install react react dom and next now jumping back to the index.html file we can delete the html in body tags because next will create those for us we can also delete the code that interacts with the app element in the reactdom.render method because next will manage those for us too we also don't need to worry about babel because next we'll set up and configure a compiler that transforms our jsx code to valid javascript that the browsers can understand finally we can see that the only code left inside the file is jsx so we can change our file type to js or jsx and delete the outer script tag there are three more things we need to do to fully transition to an xjs application first let's move the index file to a new directory called pages and more on this later we also need to add the default export to our main vr component to help next.js distinguish which component to render as the main component of this page and finally let's add a script to our package.json file to run the next.js development server while we develop we can now view our app by running npm run dev inside our terminal and navigating to localhost 3000 in our browser so let's confirm everything works and yes did you notice that once we saved the change in our file the browser automatically updated to reflect the change that's a cool feature it's called fast refresh it gives us instantaneous feedback on any edits we make and comes pre-configured with xjs so to recap our code went from this to this on the surface this is a small reduction in the lines of code but it does help highlight something react is a library that provides essential primitives for building modern interactive ui but there's still some work involved to combine the ui we create into a production ready application nexjs gives us the best developer experience with all the features we need to go to production or with little to no configuration this allows us to focus on the features that make our products unique in looking at our migration here we're already getting a sense of the benefits of using next we've removed the babel script a taste of the complex tooling and configuration we no longer have to think about and we also saw fast refresh in action just one of the many developer experience improvements we can expect so in the next sections we will discuss some of nexus features optimizations and conventions that can prepare us for production going back to our example you will notice that the home page of our application is located inside the pages folder this is intentional because just like the name implies each file inside the pages directory is considered a page or route of our application this file system-based routing supports more advanced features like subfolders and dynamic routes where we can create a single file to render any number of routes for pages like blog posts or products so let's create a schedule page for our conference application and we'll add a title to help our users know which page they are currently browsing if you remember we've already created a header component in our home page there is nothing wrong with copying and pasting this code but if we find ourselves reusing a component in a few different places it might be worth moving it into a separate file it would be quite useful if there was a way to import it into the schedule.js file so that we could reuse our code for this we can take advantage of es modules modules allows us to split code into separate files and import them when needed and modules go hand in hand with react's component based model we can create a new header.js file and move our header component into it and then we can export it so that we can use it later now there is one issue here we might not realize since we created the header.js file inside the pages folder of our application it's considered a route of our website this is definitely not our intention because header is a component and not a page it's common to move react components that are shared across a project into a folder called components one other convention is to capitalize the file names to signify that they contain react components we can now import the header component into our home page and our schedule page and let's add some navigation between our two pages with html anchor tags our header component is a great place to add our navigation because it's used on both pages now pay attention to what happens when we click the link did you notice that the page completely reloaded when we switched there is an opportunity to improve the user experience here nexjs provides a link component that builds on top of a regular anchor element this component enables client-side transitions giving a smoother client-side navigation experience without the page reload link components in our user's viewport will also prefetch the page information in the background for faster loads let's see how we can use the link component we can import the link component from next link then we can wrap the anchor with the link component and move the href attribute to the link in addition to the link component next also provides a few other helpful components that also build on top of regular html elements and add additional features and optimizations these enhanced html components include the link component we just discussed the image component which lazy loads images outside the viewport avoids content shifting around as they load and serves the image in an optimized size in a format the script component which provides a flexible loading priority for third-party scripts and the head component which allows us to make changes to a page's head metadata from anywhere within our app including deeply nested components now it's important to note that these components are enhancements and they don't break the original functionality of the html elements they are button there is a unavoidable unit of work to convert the jsx code we write into the html representation of our ui this process is called rendering when and where rendering happens determines the type of rendering method so let's go over the available options we have with nectar yes let's start with client-side rendering in a simple react application the browser receives an empty html shell along with the javascript instructions to construct the ui this is called client-side rendering because the initial ranging work happens on the user's device in contrast next pre-renders every page by default pre-rendering means the html is generated in advance on a server instead of having your own done by javascript on the user's device in practice this means that for a client-side rendered app the user will see a blank page while the rendering work is being done compared to a pre-rendered app where the user will see the constructed ui because of this in other implications such as seo and social media sharing it's generally recommended that you use free rendering unless you have a specific use case for using client-side rendering so let's look at the nexjs pre-rendering methods with server side rendering the html of the page is pre-rendered on the server for each request before being sent to the client with static site generation the work is done once at view time when the application is deployed the html is stored and reused for each request pre-rendering allows us to place a content delivery network or cdn between the server and the client cdns store the static result of the pre-rendered work in multiple locations around the world this makes cdns fast because they are situated closer to our users traditionally cdns could only store static content such as html and image files however more recently a new class of cdns can also do some computational work this means some of the rendering work can be done closer to our users previously choosing which rendering method we used was largely dependent on whether our content was dynamic or static but with edge rendering we can get dynamic content at the speed of static and the beauty of next ges is that we can choose the most appropriate rendering method depending on our use case and on a page by page basis whether that's static site generation server side rendering edge rendering or even client-side rendering so for our example we will use static site generation to fetch data from an api we began by listing our speakers as a inline array however the list of our conference speakers and their details is actually found on an external api to statically generate a page even though it's fetching external data we can export an async function called get static props to help us understand how things work let's first move our speakers array into get static props and return it as a prop now the props object including our speakers array is passed down to the page component and we can now access our speakers array by destructuring the props object instead of an inline array let's actually fetch our data from an external api next we'll now fetch the data once at build time and generate the html of the page if our data frequently changed or if we had large number of pages we could use incremental static regeneration or isr which allows us to create and update static pages without needing to reboot the entire application isr can be enabled through the revalidate property in get static props so in this case nexjs will regenerate the page in the background at the most once every five minutes but since our list of speakers won't change very often we will remove the revalidated option there are other ways to fetch data in xjs including get server side props allowing us to fetch data on the server at request time api routes a simple solution to building our api endpoints with nexjs and client-side data fetching using a data fetching library such as ucswr and of course edge functions allowing you to run javascript at the edge before a request is processed so the design of our conference app is looking very blunt let's spice things up a bit by adding some styling to the title of our header component first let's create a new file called styles.css and create a new class for our title next let's give our title a large font size in a nice c green text color we can then go to our header component and add the css class name to our h1 element now this is a good place to highlight a potential issue we could have in the future css selectors by nature are global so looking at our example this means that anywhere in our app that also uses the class name title would get a see green color applied the chance of this accidentally happening increases as the size of our applications grow one solution is to make our elements more specific these rules will now only apply to the titles inside a header another option is to make the class name more unique but another approach is to use a styling solution that foggles the issue all together instead of a generic style.css file let's name this file header.module and move it into the components folder we can then import the styles object we just created into the header component and use the styles.title property to style our h1 element behind the scenes next is using css modules to avoid styling collisions by automatically scoping css rules to the component using component level css gives us a better user and developer experience because of a few reasons your apps load faster because styles are minified and only the styles of the components used on a page are loaded styles are automatically prefixed to support other browsers the thousand one components don't affect the styles in another component and it's safer to delete styles without having to worry if they will affect other pages in addition to css modules next also supports whichever styling solution you prefer global css or sas style sheets utility-based css frameworks like tailwind or your preferred css in js library so to summarize we went from a react application to an xjs application and we also talked about a few next.js features including pages and navigation pre-rendering and data fetching and styling this was only an introduction to nexjs and there are many other features we haven't yet explored if you're new to nexjs a great place to start is by doing your interactive course on nexus.org forward slash learn this course will guide you through everything you need to know to get started with nexjs and you can also check out our documentation on nextjs.org for slash docs and the extensive list of examples we have on our github repo and of course if you have any questions you're more than welcome to ask our community on github discussions i'm looking forward to seeing you there thank you and bye

Channel: Vercel

Views: 2,094

Keywords:

Id: OB-WaTs1KHY

Length: 15min 17sec (917 seconds)

Published: Wed Oct 27 2021