DEV Community

Dahye Ji
Dahye Ji

Posted on

Getting started with Next.js

Things to be done before starting.

node -v
Enter fullscreen mode Exit fullscreen mode

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

sudo corepack enable
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

When it's all downloaded, check if it works

cd wine.likelion.com // to directory I will work
yarn dev
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

About package.json

Discussion (0)