42
Getting started with Next.js
Things to be done before starting.
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
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.
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;
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.
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.
<script>
.
eg) dev
> yarn dev
or build
> yarn build
dev
> Development mode, not optimised, it skips error sometimesbuild
> 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
** thenyarn start
lint
> spell, syntax check with ESLINT42