Getting started with Next.js

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;
    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
  • 42

    This website collects cookies to deliver better user experience

    Getting started with Next.js