Next.js with Typescript + redux

We’ll talk about Server-side-rendering (SSR) with Next.js Next.js with Typescript + Redux

Referenced via

• https://medium.com/@selvaganesh93/setup-next-js-with-typescript-integration-dece94e43cf5
• https://holywater-jeong.github.io/blog/next-js-redux/
• </i>

Next JS Project SetupPermalink

yarn init --yes

–yes means that will automatically answer yes to all questions which may have security implications.

yarn add next react react-dom typescript

Install required dependencies

Install required @types modulePermalink

yarn add @types/next @types/react

@types prefix means get the declaration files for packages

Needed for Typescript @zeit/next-typescript is no longer needed since Next.js has built-in support for TypeScript now.

Create configuration filePermalink

Create next.config.js in the project

Create .babelrc in the project

Create tsconfig.json in the project

From Next 9, Typescript supported default, so not needed any configuration tsconfig.json will be created by default.

Add a scripts property to the package.json file.

{
  ...
  "scripts": {
    "dev": "next"
  }
}

Include a script to run a local server for development

Create shard layoutPermalink

Create pages LayoutPermalink

Create a new pages directory, then create tsx file.

import React from 'react'
const Index: React.FunctionComponent = () => {
  return (
    <h1>Hello Next.js 👋</h1>
  )
}

export default Index

Now run the dev deployPermalink

yarn dev

or

npm run dev

Install ReduxPermalink

yarn add react-redux redux redux-thunk

react-redux : Support react to use redux

redux : Redux, itself

redux-thunk : Library for asynchronous at redux

Also add redux-devtools-extension (redux dev toops https://d2.naver.com/helloworld/1848131)

yarn add redux-devtools-extension

store initializePermalink

reducer initializePermalink

action initializePermalink