What you need to know about Nextjs before you migrate from Create-React-App

Recently, I had to migrate my react website to nextjs because I wanted to improve the SEO of my website, something that react was failing to give me full capacity to do.

What you should expect to learn in this article;

What is Nextjs?
Structure of Nextjs projects
Routing in Nextjs

What is Nextjs?

Nextjs is a framework of Reactjs(yep a framework of a framework) which simply means it enhances the power of react by adding extended abilities like inbuilt image optimisation, SEO metadata setup to mention but a few on top of React's already existing functionalities.
Nextjs uses server side rendering(SSR) which means it first fetches the pages to render in the browser from a server whereas Reactjs uses client side rendering(CSR) where the browser fetches only the bare minimums of the website content and the rest is handled by the javascript library. Server side rendering is good for SEO because the entire website content is available before it is loaded in the browser and search engines are able to crawl and index it.

The formal structure of nextjs projects

- public
     - images
- pages
     - _app.js
     - document.js
     - index.js
     - about-us.js
     - contact-us.js
- styles.css
- components
     - Navbar
          - index.js
          - Navbar.module.css
- package.json

The public folder is used by Nextjs to keep static assets eg images.
The pages folder is where you add the pages of your application. The name you give to the page will be the name of the route used to access that page. _document.js is where you define the overall DOM structure of your pages and it will look like this;

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

The _app.js acts as your layout component ie you add all the shared layout components here. It will look something like this;

import '../styles.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

components are the reusable parts of your code or parts that appear in all the pages eg the navbar, footer etc.
Nextjs uses two common methods to style elements. There is global css where the styles are placed in styles.css that is globally accessible by any file. There is also css modules which is used to style components. The styles file name includes the name of the component and the .module.css extension that is name.module.css. To use the css module in your component eg into your header component, add
```
import styles from Navbar.module.css
```
and then to apply the styles, add styles to the class or id of the element you want to style
```
<nav className={styles.navbar}>
   <span className={styles.navItem}>Item 1</span>
   <span className={styles.navItem}>Item 2</span>
</nav>
```
If you wanted to apply changes to an element that has been styled using css modules, to reference the class or id use styles['navbar']. Below is an example.

document.getElementById(styles['navbar']).style.border = "1px solid #eee";

Your package.json will look like this

{
  "name": "my-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "next": "^12.0.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "scripts": {
    "start": "next start -p $PORT",
    "build": "next build",
    "dev": "next dev"
  }
}

Routing in Nextjs

As I mentioned before, how you name your pages is how your routes will also be named eg if you have a page called tour-resort.js, then to access the page the route will be /tour-resort. To access a route in your page, use

import Link from "next/link";

<Link href="/tour-resort">
      <a>Tour Resort</a>
</Link>

So guys that is basically what you need to know before you migrate your create-react-app to next. Most articles were pretty brief for me as they left those tiny details on how to structure the code, how to use js to modify an html element etc. To know how to actually migrate from create-react-app, check out this article.

If you found this article helpful, please leave a thumbs up or a comment. If you find bugs, irritating typos, completely wrong statements, also let me know in the comments section, I will edit accordingly. Thanks for reading✌

What you need to know about Nextjs before you migrate from Create-React-App

A beginner's guide to Nextjs especially for those with a background in Reactjs

What is Nextjs?

The formal structure of nextjs projects

Routing in Nextjs