Coding Workflows
Building a Project Locally
When we are testing out our application locally, we will want to see what it looks like. For our NextJS project, we can locally build and deploy our app by running the command:
npm run devNote, you will have to run this command in the root of your project folder, i.e. where the package.json file is located.
When you run this command, you will be able to view your project in the browser at a certain URL (usually http://localhost:3000).
Debugging
Debugging is the process of finding and fixing errors in your code. It is a crucial part of the development process! The most common way of debugging is by running your project locally (with the above command), and then right-clicking in your browser and clicking the Inspect button.
When you add print statements like the following into your application:
console.log("=======================================")console.log('Starting waitlist verification process for:', { email, hasFormData: !!formData });these statements should appear in the console panel shown below:
This print capability is super powerful, as it allows you to see what the variables look like when the application is running. In the above statement, the code says to print out the string, followed by the variable ‘email’ and ‘hasFormData’. It helps you understand why an error might be happening and how to fix it.
Debugging Workflow
We do not show an in-depth debugging session here, but don’t worry—there will be many instances where errors come up and we will have to figure out what is going on!