Creating an application with NextJS and Styled Components from scratch (Part 1)

In this post, I will show you how simple it is to create an application with NextJS and Styled Components.

It is no secret that React has conquered the world of the web, but, unfortunately, when using React alone, we have several problems regarding the 100% friendly development of components and even in SEO issues. Aiming at these problems, some tools were created to help us in the process of creating our pages. We will use two tools that will leave our site with good SEO and improve the development and support of each component created. They are: NextJS and stylish components.

Getting to know NextJS

NEXT.js is maintained by Zeit and the open source community, and aims to optimize the process of developing a React application, offering components for routes, SSR support (server-side rendering), in addition to a webpack already configured for the React and ES6 and ES7 transpilation that include features like asynchronous and waiting. Even so, it keeps the start simple and flexible enough to scale the project to the size you need.

Starting a project from scratch with Next

To start our application, we will create a folder named my-portfolio, I recommend that you do this step through the terminal.

$ mkdir my-portfolio

After creating the folder, open it using the following command:

$ cd my-portfolio

Now we will actually bring our application to life, we follow the following steps:

$ yarn init #It will create a package.json file.
$ yarn add react react-dom next #Add dependencies

Now to see the magic happen, let's create a folder called pages at the root of the project. This folder is the only condition for Next to work correctly, routes are defined based on the contents of that folder. Also create an index.js file where the home page component will be defined.

$ mkdir pages #create folder
$ touch pages/index.js #creates an index.js file inside the folder

Now let's open the project folder in a code editor (I recommend using VSCode) and add the code that will display the message "Hello, world!", Below the code to be written in index.js.

import React from 'react';
const Index = () => {
  return (
   <>
    <h1>Hello World!</h1>
   </>
  );
};

The Next framework provides a pre-configured development server integrated with hot reload and Webpack. Just add these lines to the package.json:

```Line added in package.json
"scripts": {
"dev": "next"
}

To see our result, we run the yarn dev command to start the development server.



```Terminal-control
$ yarn dev

So, did you like? We are just starting our project, there are a lot of cool things coming up. I hope you enjoyed this first part, a big hug and until the next :).

Part2
Part3