Skip to main content

Next.js in 2021

Jomson, Nepal

Repository

Project Setup

npx create-next-app

npx: installed 1 in 4.003s

√ What is your project named? ... next-blog
Creating a new Next.js app in E:\next-blog
cd next-blog
git init
npm run dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Add Typescript

Create a file in your app root called tsconfig.json and install the dependencies and restart the server:

npm install -D typescript @types/react @types/node

npm run dev

Next.js will automatically add some TS configuration the the config file. To start using Typescript rename the default _app.js to _app.tsx and import the default types that come with the Next.js starter app:

import {AppProps} from 'next/app'

import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}

export default MyApp

Add Prettier

npm i -D prettier

You can add Prettier configuration to your package.json file:

"prettier": {
"semi": false,
"singleQuote": true,
"jsxBracketSameLine": true,
"requirePragma": true,
"insertPragma": true
},
"devDependencies": {
"@types/node": "^14.14.41",
"@types/react": "^17.0.3",
"prettier": "^2.2.1",
"typescript": "^4.2.4"
}

Set VS Code Editor: Default Formatter to Prettier (In Settings Ctrl+, search for formatter) - make sure the Prettier Extension is installed.

Add BaseURLs for Imports

Add the following Typescript configuration to tsconfig.json:

{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@components/*": ["components/*"],
"@styles/*": ["styles/*"]
},

...

You can now import directly from those paths and no longer have to work with relative paths:

import styles from '@styles/Home.module.css'
import Header from '@components/header'

Deployment

npm scripts

"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next export"
}

You can run your Next.js App on a [Node Server](Node.js Server). npm run build builds the production application in the .next folder. After building, npm run start starts a Node.js server that supports hybrid pages, serving both statically generated and server-side rendered pages. In production this can be done in a CI pipeline in Docker.

Coming from Gatsby.js I am more interested in getting the static build out of Next.js. For this run:

npm run build
npm run export

Then you'll have a static version of your app in the out directory.