Getting started with Next.js

#nextjs #react #ssr #beginners

Things to be done before starting.

Download Node.js (https://nodejs.org/en/)
Download XCode (Mac Only, https://developer.apple.com/xcode/)
Create GitHub account(https://github.com/)
Create Vercel account (https://vercel.com/)

node -v

You can check the version of you node. If it's not recently one, download a new one.

sudo corepack enable

and this will download yarn.(I'm using Mac)

yarn create next-app wine.likelion.com --typescript
// yarn create next-app { project name here } --typescript 
// if you add --typescript at the end, it means that I am going to use typescript

When it's all downloaded, check if it works

cd wine.likelion.com // to directory I will work
yarn dev

Pages

I think I used router when I used React but there are pages in Next.js
If you make a directory(folder) or file inside Pages directory, they work like Router.
This was the first page I created.

import type { NextPage } from "next";

// NextPage type (because it's typescript, you should specify types)
const WinePage: NextPage = () => {
    return (
        <div>
           <h1>Wine</h1>
        </div>
    )
}

export default WinePage;

Documentation - Page in Next.js

package.json

When you create next-app, you have package.json file in the directory.
It's JSON format and it records important metadata about a project which is required before publishing and also defines functional attributes of a project that it uses to install dependencies, run scripts, and identify the entry point to the package.

scripts: Scripts are a great way of automating tasks related to your package, such as simple build processes or development tools. Using the "scripts" field, you can define various scripts to be run as yarn run <script>. eg) dev > yarn dev or build > yarn build
dev > Development mode, not optimised, it skips error sometimes
build > Production mode, it's to create a product that will be deployed
start > Start production server, used to test in real environment
- ** works only it does yarn build** then yarn start
lint > spell, syntax check with ESLINT