Getting started with next js

Working with react js is fun until you have to do some SSR (Server Side Rendering) or SEO (Search Engine Optimization) for your application. When I created my first application in React js I got into a problem with SSR because my backend was in WordPress. There wasn’t much information on how to do SSR with PHP in the backend at that time. SSR is required to do SEO for your application and there wasn’t any chance to do that with a PHP application so I end up generating static HTML for my React application. I will cover that in another tutorial 🙄. So SSR was a big deal until I got to know about Next.js. Next.js is like React js on steroids. It supports bulks of feature like

• Support SSG (Static Site Generation).
• Support SSR (Server Side Rendering).
• Built-in CSS and Sass support.
• Fast Refresh.
• Code-splitting and Bundling
• File-system Routing (Every component in the pages directory becomes a route).
• Built-in Image optimization

So using Next.js alone can skip the most popular modules for React js like react-router, react-snap, helmet, node-sass, etc in your project. The coding structure in Next.js is the same as we use React.js just the folder structure is somewhat different and you can easily migrate your React.js application to Next.js. So now let us see how to use Next.js for our next project.

Requirements

• Node.js 10.13 or later
• macOS, Windows (including WSL), or Linux.

Setup

1. To create a project open the terminal and run the below command

npx create-next-app projectName
# or
yarn create next-app projectName

2. Start the server

npm run dev
#or
yarn dev

3. Open http://localhost:3000 in your browser

Creating Route

Creating routes in Next.js is comparatively easier than React.js. Let see how to to do that.

1. Open pages directory and create an about.js file.
2. Now add some code inside that file.

3. Now visit http://localhost:3000/about in your browser. About route has been created.

For creating dynamic routes.

4. Create a directory inside the pages directory with the name blog and then create an index.js file inside the blog directory. This will create a route for the blog. Add some JSX to the index.js file.

5. Now create a directory with the name [id] inside blog directory to create dynamic routes inside the blog. Now create an index.js file inside the [id] directory and paste the below code.

6. Now you can visit http://localhost/blog/anynamehere to check the dynamic route.

Data Fetching

There are different methods in Next.js for data fetching. Each method has its own uses and advantages. Below I will show you the simplest way of Data fetching which will also be useful for SSR. For this, I will use a third-party API source from jsonplaceholder.typicode.com.

1. Install Axios for data fetching in your project.

npm i axios
#or
yarn add axios

2. Now open the index.js file from the pages directory and remove everything and then paste the below code.

3. Start your server npm run dev and visit http://localhost:3000 to see the changes. All the users name will be printed and if we check the source using the chrome dev tool we will see that the page is populated with the data which is essential for SEO.

Error Page

1. Create _error.js file inside the pages directory.
2. Now paste the below code inside that file.

3. Now visit any random page which doesn’t exist and it will show an error message.

Built-in CSS

Component-Level CSS

1. Create a components directory in the root folder and then Create a card directory inside that components directory.
2. Now inside the card directory create two files Card.js and Card.module.css
3. Now in your Card.module.css paste the below CSS.

4. Then paste the below code inside the card.js file.

You can see that I have imported the CSS as styles and then passed that as className to the div of the card calling .card style from the stylesheet. Now you can call this card component anywhere in your project as I have imported it into our app.js file.

Note: Next.js supports CSS Modules using the [name].module.css file naming convention.

CSS-in-JS

1. Create a Button.js file inside the components folder and paste the below code.

The above CSS will be scoped only to the button and will not apply to any other elements. This was you can scope the styling only to the element. There is also another style option that will apply the CSS globally but then you won’t be able to use scope base styling.

<style global jsx>{`
       //your css here
 `}</style>

That’s it for today. There are lots of more possibilities you can do with Next.js which I can’t explain in a single tutorial. I’ll try to cover more topics on Next.js in my future tutorials. Till then enjoy reading my tutorials.

Below I have shared Live code and GitHub repository for reference.

Mediumtutorial/nextjs-getting-started