How to Create a Next.js Project
This will create a Next.js project with TypeScript.
First, make sure that
yarn is set up on your system.
Then run this command to set up everything!
NOTE: This will create a new folder in the current directory containing all the project files, so run this where you want your project folder to be.
yarn create next-app --typescript [optional: directory name]
If you don't specify a directory name in your command, you'll be prompted for one.
HTTP requests and responses
As previously touched upon in previous lectures, data is most commonly communicated on the internet between a client and a server through the HTTP protocol.
When you type in a URL into your browser (the client), it makes a HTTP request to the server specified by the URL. The server, if reached, then responds with a HTTP response, which contains various information. Depending on the server and/or endpoint that the request is for, the response body (the main content) may contain different types of data.
You might see the data in response bodies ranging from simple strings, to large JSON objects, to full-on byte streams (most common used for file downloads and images). Responses will have headers that carry additional information, some that describe what kind of content the response carries. Note that HTTP requests also have headers and bodies!
However, the most familiar response body you will have encountered as a regular person is a website, the structure of which is defined in HTML (Hypertext Markup Language). When encountering this kind of response, your browser will take the HTML code from the body and render it into a website.
Your Own Website
Now that we understand how information is transmitted over the internet, we can have a better understanding of how we can host websites for others to use.
First, we need to have a server that clients (commonly browsers) can send requests to. In this course, we will be writing a Node.JS app that does exactly this. Once we have this server, all we have to do is supply the HTML/CSS/JS for the website to render!
A Bit About React
We will be exploring React much more deeply in the following lectures, but for now it might be helpful to know what drives many web developers to use libraries like React to create their website, rather than pure HTML/CSS/JS.
While using such libaries, however, we must understand that browsers are only capable of rendering regular HTML/CSS/JS sites. You might be working with React in TypeScript, for example, but a browser won't understand your TypeScript source code.
Of course, there is a solution: we can compile/transpile* our source code into regular HTML/CSS/JS that is readable by the browser!
*Note: usually transpilation is used to describe the process in which source code is turned into equivalent source code (perhaps in another language), while compilation is used more generally and often implied to produce machine code.
A Bit Of A Problem
Traditionally to play video games, you would use your computer to run the game, which might involve running some game logic and computing some shaders to figure out the pixels on your screen. This might be a suboptimal experience if you don't have the right or powerful enough hardware. It's like client-side rendering!
Cloud gaming allows you to offload all this computation to the cloud so that you can simply receive the pixels you need over the internet to display on your screen, without figuring out those pixels locally on your own machine. It's like server-side rendering!
Next.js is a server framework built around React that provides you nice features like server-side rendering. Over the past few years, this technology has steadily increased in popularity.
In this course, we'll be taking advantage of Next.js to make our web development easier. This is something new we're introducing this semester, so please bear with us as we wade through uncharted territory.
We'll be writing React apps within the Next.js framework and exploring some other features later on as well, such as authentication.
Creating Your Project
See this section for instructions on creating a Next.js project.
You can open up the newly created directory in VSCode from your terminal with
code [directory name]
Your new project should have a few folders and files - let's talk about the one's you'll be interacting with the most:
- This is the "project file" for all Node.js projects. It contains metadata about your project, such as dependencies, as well as user-defined scripts to use with yarn/npm. Lecture 2 has some more info on this file.
- This is the TypeScript config file. You usually don't touch this too often, but it is responsible for how TypeScript interprets and interacts with your codebase.
- Pages in Next.js represent full-on web pages attached to a route. You'll see
.tsx(React) files in this folder representing each page (excluding ones that start with
_, such as
- Important Note: Don't put all of your React components in this folder! We'll
be making a new folder called
components/for those. Only pages belong here.
- We will see
/api/folders a lot, which are designated for backend related files. You'll find
.tsfiles here, which compose the backend API of your Next.js server.
- This is where your CSS styles live by default. Note how the
.cssfiles are named.
- Static files live here. You might want to place files or images in this folder.
- This folder doesn't exist by default, but let's add it! We'll be putting our React components here.
Running The Server
If we look at our
package.json, we have have 4 scripts by default:
- Runs the project in development mode. This is what you'll be running while developing. Next.js has hot reloading ("Fast Refresh"), so you won't have to rerun this command every time you make a change locally.
- Builds the Next.js project for production use. You'll need to run this
before running the
- Builds the Next.js project for production use. You'll need to run this before running the
- Runs the optimized production build generated by the
- Runs the optimized production build generated by the
- Searches through your code and tries to find bad code. If you set up ESLint with your VSCode correctly, you should be getting linter warnings directly in your IDE. However, you can also run this command to run the linter.
You can run these scripts with
yarn [script], for example
And that's it! Feel free to play around with this project, and we'll be diving into React in the next lecture.