Website SEO-friendly with Next.js
Introduction
In the last couple of months I’ve been working in an awesome real estate project, and one of the product goals was to share estates to the customers with custom information about it, in a nutshell, be part of the leading results at Google search.
The app would be built with React getting data from the server, but how the heck would we achieve to share a URL with custom information according to the page being React a SPA tool (Single Page Application)? Well, that’s when we discovered Next.js.
What is Next.js?
Next.js is a React framework that lets us create static pages from the server using SSR (Server Side Rendering) writing code with Javascript and JSX. Next.js by default has metadata management with it’s components like <Head> component, making our app SEO-Friendly altogether.
Getting Started
Let’s start creating a new project using npx package provided by Versel that creates a react-to-use Next project. Run the following command in your terminal.
> npx create-next-app next-seo-friendly
Customizing Index page
Next has a file-system based router built on the concept of pages, that means that all the files inside pages directory automatically will be a new page, for example:
/pages/index.js→//pages/about.js→/about/pages/contact.js→/contact
For more information about Routing in Next, I recommend you to read the official documentation here.
Let’s edit the code base that Next.js provides in index.js. Add the following snippet code in index.js file.
Excellent! We have our main page ready. Execute the following command and check the results in your browser.
> npm run dev
Adding global styles
We are going to organize a little bit the project and add a some styles before we start to manage the metadata with Next.js
Let’s create a new file called styles.css in root of the project.
Now we are going to add styles globally. For that, we are going to override the app.js file. Next uses the App component to initialize whole pages. We can override that file creating a new file called _app.js inside pages folder.
If you want to know more about App component, I recommend you to look at the official documentation here.
Abstracting code in components
We’re going to abstract our code moving our logic from index.js to another component, for that I created a new folder src in the root project. Inside that folder we’re going to create another folder components. After that we’re going to create a new file called Home.js
We import the component to our index page index.js
Adding metadata to home page
At the beginning of the post, I told you that Next let’s us manage the metadata in our application through the <Head> component. This component let’s us add metadata inside them.
For a better understanding, let’s implement it in Home.js
Excellent! Now we can change the metadata depending on the pages where we are. We are going to create two new pages: about.js and contact.js. Also, we’ll create a component for each one of them, but before we do that, let’s add a little more style and a Nav.js component to navigate through the application.
Add more styles…
Now, we’re going to create a new component called <Nav> that will allow us to move through the application.
We’re going to use another Next component called <Link> that will allow us make client-side transitions between routes can be enabled via the Link component exported by next/link.
For more information about <Link> component I recommend you to read the official documentation here.
Now we’re going to add <Nav> component into _app.js file that allow us to keep that component in whole application for we be able to moving between pages.
Creating new pages
Inside components directory we are going to create new components: About.js and Contact.js. Those components will be imported in about.js file and contact.js file in pages folder.
We import the component in respective page.
Similarly, our Contact contact component.
We import the component into the respective page.
This way, we have three new pages and each one of them with custom metadata that will improve our SEO. We can implement this same technique in other pages within our project, we can also handle dynamic information.
Isolate a metadata component
The way that we have manipulated our metadata is good, however, we can create an isolate component that we can be used in the whole project and it has the default metadata and Open Graph metadata that will allow that applications like Facebook, Twitter and Google to crawl the metadata we want.
If you want to know more about what the Open Graph is, I recommend you read about it here.
Well, for isolate our component, first we’re going to create a new component called Metadata.js.
This component will receive two props: title and description in order to customize that information if we want, depending on the page. Now we are going to import it in our components page.
Good! We keep having the metadata in each page and a clean code.
Auditing our application with Google Lighthouse
Using Google Lighthouse, we get good results in SEO section getting 100%.
Conclusion
Let’s recap whole of topics that we saw:
- We learned about the
<Head>component that Next.js provide us to manage our metadata in our application. - We created pages using file-system based router by Next.js and we used
<Link>component for moving through our application. - We overwrote
<App>component to keep a base structure of our website and set defaults styles. - We isolated a component called
Matadatato use it through our application with default metadata and ready to receive custom metadata like title and description via props.
Next.js is a powerful tool and we can do a lot with it, among other things, manage the SEO of our application, also we can create a sitemap.xml file using the server side features of Next and we can map our routes.
Thank you for reading!
Repository
If you want to try to Next.js, here is the source code that I used for this article and you can play with it and add more awesome stuff.
