Next.js Workshop Getting Started
This is the getting started guide in using Next.js
Getting Started
Next.js is a React Framework that is an all in one solution for creating, building, deploying a website. You can have static pages (Web page that don't change) and server side rendered components which change.
To get started we need to have nodejs installed and you can go to this article to get started:
Github Repo
https://github.com/LevelUpDevTraining/nextjs-workshop
Installing Next.js
We will be using an npx command:
npx create-next-app workshop
This will create a Next.js app called workshop. When it is finished build and creating all the folders and files we can start the Next.js development server.
Starting the Next.js Server
Now we can run this command to start the server:
npm run dev
This will start the server and output text similar to this:
started server on http://localhost:3000
Now if you go to http://localhost:3000 in your web browser you can see the auto generated Next.js Application.
index.js
If you open the pages/index.js file, you can see the main component of the app. This will be rendered when you go to http://localhost:3000. It is a React component that will be server side rendered and then sent as an html page.
about.js
If you can create an about.js page in the pages folder and paste this content:
export default function About() {
return <>This is an about page</>;
}
Then you can go http://localhost:3000/about and you can see the new about page.
Conclusion
Next.js is a framework to server side render React components making it easy for development. In the next article we will lean about Next.js routing.