Creating the first page with NextJS
This is a series of articles that will help us create Hcode's e-commerce page using NextJS, React, and JavaScript.
The first part of this series is the setup, if you haven't seen it yet, we recommend you to see it first:
https://hcode.com.br/#/blog/1-nextjs-introducao
Now let's open VSCode, and create a file named index.js inside the pages directory created in the previous article.
Inside the index.js file, we will create a component that will be exported, containing JSX syntax, which allows us to use HTML commands and similar ones within React transparently; note that we have only one return statement inside the function and that it uses parentheses, so the JSX code is recognized and can be translated to the final application.
Something that will help us write robust and correct components and applications has to do with the syntax analysis that doesn't happen with HTML natively; here in NextJS if you forget to close a tag or make a mistake with some HTML rule, an error will be displayed. For example, imagine that we did not close the greater than sign ">" of the closing Div, the following result will be produced:
This in real time, once the file is saved it already reflects, fails to compile, and the reason we have already seen: it failed to close the tag "jsxTagEnd" Isn’t it amazing? This is possible because WebPack is present and has Hot Module Replacement built-in. A type of Hot Reload.
Shall we create one more page for our application? In the Pages folder, create a file named produtos.js and similar to the index.js file, we will create a component and export it.
To access this page, simply call it with the route produtos: localhost:3000/produtos
Now we need to create links between the pages; NextJS itself has a navigation feature that will not reload the entire page like the default behavior of the element; we will see this component in the next article.
Until then!
Glaucio Daniel