Create screen by Next.js

Tram Ho

Install required

Run the following command to write TypeScript

Create screen template

Before creating screens, create a sample file.

In this sample file we will define common for header and footer.

※ This article does not focus on style, so it will use the bulma of CSS framework.

Create layout.tsx file in Components folder.

Through the function getHeader () and getFooter () function to describe the individual processing by variables.

Create original scrolling screen

Create a screen like the login screen to make the original screen move.

Create the login.tsx file in the Pages folder.

Create a moving target screen

Create screens like the My Page screen to make the target screen move.

Install library needed to call API.

** Create a user.tsx file in the Pages folder

When displayed, the screen will run the getInitialProps () function and call API http: // localhost / api / user

Handling external API calls

Create call handling with the file created above.

Depending on the location described on the component and the page, it can be run by either the server or the client. In the case of an SSR structure, it is not possible to call an external API on the client side.

Here’s how to make the API callable through the Next.js server.

Create API called on Next.js side

Note: The study-next_web_1 section is the name of the container, so change it to match the container name used.

Create external API handler

Create user.php in the web directory, create php to use with json.

 

Last words

Above is a simple description of how to create a screen in the template, move the screen and get data from the external server.

Share the news now

Source : Viblo