[Sep 2020]Building a front-end environment based on Next.js
トップ
  1. 1. Introduce Next.js 1. Introduce Next.js
    1. 1-1. Configure next.config.js 1-1. Configure next.config.js
  2. 2. Support TypeScript 2. Support TypeScript
    1. 2-1. Modify TypeScript configuration 2-1. Modify TypeScript configuration
    2. 2-2. Support TypeScript in src dir 2-2. Support TypeScript in src dir
  3. 3. Override App and Document components in Next.js 3. Override App and Document components in Next.js
    1. 3-1. Override App component 3-1. Override App component
    2. 3-2. Override Document component 3-2. Override Document component
  4. 4. Support PWA 4. Support PWA
    1. 4-1. Modify next.js configuration 4-1. Modify next.js configuration
    2. 4-2. Create manifest.json 4-2. Create manifest.json
    3. 4-3. Create favicon 4-3. Create favicon
  5. 5. Introduce Styled Component 5. Introduce Styled Component
    1. 5-1. Modify Babel configuration 5-1. Modify Babel configuration
    2. 5-2. Modify override of app component 5-2. Modify override of app component
  6. 5-3. Add to document component override 5-3. Add to document component override
    1. 5-4. Add sample code of Styled Component 5-4. Add sample code of Styled Component
  7. 6. Recoil 6. Recoil
    1. 6-1. Adding settings to app component 6-1. Adding settings to app component
    2. 6-2. Add sample code of Recoil 6-2. Add sample code of Recoil
  8. 7. Add EditorConfig / ESLint / Prettier 7. Add EditorConfig / ESLint / Prettier
    1. 7-1. Modify EditorConfig 7-1. Modify EditorConfig
    2. 7-2. Modify configuration of ESlint 7-2. Modify configuration of ESlint
    3. 7-3. Modify configuration of Prettier 7-3. Modify configuration of Prettier
    4. 7-3. Modify npm-scripts of package.json 7-3. Modify npm-scripts of package.json
  9. 8. Add Jest 8. Add Jest
    1. 8-1. Configure Jest 8-1. Configure Jest
    2. 8-2. create sample test 8-2. create sample test
    3. 8-3. Modify npm-scripts of package.json 8-3. Modify npm-scripts of package.json
  10. 9. Add Husky 9. Add Husky
    1. 9-1. Modify npm-scripts of package.json 9-1. Modify npm-scripts of package.json
  11. 10. Add react-aria and react-stately 10. Add react-aria and react-stately
  12. Conclution Conclution
質問
Next.js
Here are the steps for building a front-end environment based on Next.js. We have chosen popular libraries as of September 2020 with the goal of being able to prototype efficiently.
Developer
Price Rank Dev
Update: 

Here are the steps for building a front-end environment based on Next.js.
We have chosen popular libraries as of September 2020 with the goal of being able to prototype efficiently.
We will use the following as our primary libraries

1. Introduce Next.js

Please execute the following commands on your terminal:

# create project folder
mkdir PROJECT_NAME_DIR; cd PROJECT_NAME_DIR

# setup Next.js
npm init next-app .

# move pages to src/pages
mkdir src ; mv pages/ src/pages

# create configuration file for Next.js
touch next.config.js

1-1. Configure next.config.js

Configure next.config.js as follows:

/* eslint-disable
    @typescript-eslint/no-var-requires
*/

const { resolve } = require('path');

const nextConfig = {
  webpack: (config) => {
    // Set the src directory to the root of the alias
    config.resolve.alias['~'] = resolve(__dirname, 'src');
    return config;
  },
};

module.exports = nextConfig;
Write a comment

2. Support TypeScript

Please execute the following commands on your terminal to support TypeScript:

# install TypeScript libs
yarn add --dev typescript @types/react @types/react-dom @types/node

# create a configuration file for TypeScript
touch tsconfig.json

# automatically create some nessesary files with Next.js dev mode
yarn dev
# once it's generated, it's finished.

# convert js and jsx files to ts and tsx under the src directory
find src -name "*.js" | sed 'p;s/.js$/.tsx/' | xargs -n2 mv

2-1. Modify TypeScript configuration

Please modify tsconfig.json as follows:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

2-2. Support TypeScript in src dir

Please modify src/pages/index.tsx as follows:

import React from 'react';

export default function Home(): ReactElement {
  return (
    <>
      <h1>My page</h1>
    </>
  );
}
Write a comment

3. Override App and Document components in Next.js

Please execute the following commands on your terminal:

# Create _app.tsx and _document.tsx
touch src/pages/_app.tsx && touch src/pages/_document.tsx

# Install sanitize.css
yarn add sanitize.css

3-1. Override App component

Please modify src/pages/_app.tsx as follows:

import * as React from 'react';
import App, { AppProps } from 'next/app';
import 'sanitize.css';

class MyApp extends App {
  render(): JSX.Element {
    const { Component, pageProps }: AppProps = this.props;

    return (
      <React.Fragment>
        <Component {...pageProps} />
      </React.Fragment>
    );
  }
}

export default MyApp;

3-2. Override Document component

Please modify src/pages/_document.tsx as follows:

import Document, { Html, Head, Main, NextScript } from 'next/document';
import {
  DocumentContext,
  DocumentInitialProps,
} from 'next/dist/next-server/lib/utils';

export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html lang="ja">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
Write a comment

4. Support PWA

Please execute the following commands on your terminal:

# Install PWA module
yarn add next-pwa

4-1. Modify next.js configuration

Please modify next.config.js as follows:

/* eslint-disable
    @typescript-eslint/no-var-requires
*/

const { resolve } = require('path');
const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');

const nextConfig = {
  pwa: {
    dest: 'public',
    runtimeCaching,
  },
  webpack: (config) => {
    // set the src directory to the root of the alias
    config.resolve.alias['~'] = resolve(__dirname, 'src');
    return config;
  },
};

module.exports = withPWA(nextConfig);

4-2. Create manifest.json

Please create public/manifest.json by https://app-manifest.firebaseapp.com/.

Please execute the following commands on your terminal:

mkdir public && mkdir public/images

4-3. Create favicon

Create public/favicon.ico by https://favicon.io/.

Write a comment

5. Introduce Styled Component

Please execute the following commands on your terminal:

yarn add styled-components @babel/plugin-proposal-optional-chaining

touch babel.config.js

5-1. Modify Babel configuration

Please modify babel.config.js as follows:

// eslint-disable-next-line no-undef
module.exports = function (api) {
  api.cache(true);

  const presets = ['next/babel'];
  const plugins = [
    // eslint-disable-next-line no-undef
    [
      'styled-components',
      { displayName: process.env.NODE_ENV !== 'production', ssr: true },
    ],
    '@babel/plugin-proposal-optional-chaining',
  ];

  return {
    plugins,
    presets,
  };
};

5-2. Modify override of app component

Modify src/pages/_app.tsx as follows:

import * as React from 'react';
import App, { AppProps } from 'next/app';
import 'sanitize.css';
import { ThemeProvider } from 'styled-components';

const theme = {};

class MyApp extends App {
  render(): JSX.Element {
    const { Component, pageProps }: AppProps = this.props;

    return (
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    );
  }
}

export default MyApp;
Write a comment

5-3. Add to document component override

Add to src/pages/_document.tsx as follows:

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import {
  DocumentContext,
  DocumentInitialProps,
} from 'next/dist/next-server/lib/utils';

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render(): JSX.Element {
    return (
      <Html lang="ja">
        <Head>
          <link rel="shortcut icon" href="/favicon.png" />
          <link rel="manifest" href="/manifest.json" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

5-4. Add sample code of Styled Component

Add sample code of Styled Component to src/pages/index.tsx as follows:

import styled from 'styled-components';
import React from 'react';

export default function Home(): ReactElement {
  return (
    <>
      <Title>My page</Title>
    </>
  );
}

const Title = styled.h1`
  color: red;
  font-size: 50px;
`;
Write a comment

6. Recoil

Execute the following commands on your terminal:

# Install Recoil module
yarn add recoil

6-1. Adding settings to app component

Adding Recoil settings to src/pages/_app.tsx as follows:

import * as React from 'react';
import App, { AppProps } from 'next/app';
import 'sanitize.css';
import { RecoilRoot } from 'recoil';
import { ThemeProvider } from 'styled-components';

const theme = {};

class MyApp extends App {
  render(): JSX.Element {
    const { Component, pageProps }: AppProps = this.props;

    return (
      <RecoilRoot>
        <ThemeProvider theme={theme}>
          <Component {...pageProps} />
        </ThemeProvider>
      </RecoilRoot>
    );
  }
}

export default MyApp;

6-2. Add sample code of Recoil

Add sample code of Recoil to src/pages/index.tsx as follows:

import styled from 'styled-components';
import React, { ReactElement } from 'react';
import { atom, useRecoilState } from 'recoil';

const textState = atom({
  default: '', // default value (aka initial value)
  key: 'textState', // unique ID (with respect to other atoms/selectors)
});

export default function Home(): ReactElement {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event: {
    target: { value: string | ((currVal: string) => string) };

  }) => {
    setText(event.target.value);
  };

  return (
    <>
      <Title>My page</Title>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </>
  );
}

const Title = styled.h1`
  color: red;
  font-size: 50px;
`;
Write a comment

7. Add EditorConfig / ESLint / Prettier

Execute the following commands on your terminal:

# Install Eslint and prettier module
yarn add --dev eslint eslint-plugin-react prettier eslint-config-prettier eslint-plugin-prettier

# Install Eslint with TypeScript
yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

# Create some configuration files for EditorConfig / ESLint / Prettier
touch .editorconfig && touch .eslintrc.js && touch .prettierrc.js

7-1. Modify EditorConfig

Modify .editorconfig as follows:

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

7-2. Modify configuration of ESlint

Modify .eslintrc.js as follows:

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    '@typescript-eslint/ban-ts-ignore': 'off',
    eqeqeq: ['error', 'always', { null: 'ignore' }],
    'no-console': 'error',
    'no-debugger': 'error',
    'react/jsx-no-bind': [
      'error',
      {
        allowArrowFunctions: true,
        allowBind: false,
        allowFunctions: false,
        ignoreDOMComponents: false,
        ignoreRefs: false,
      },
    ],
    'react/prop-types': 'off',
    'react/react-in-jsx-scope': 'off',
    'sort-keys': [
      'error',
      'asc',
      { caseSensitive: true, minKeys: 2, natural: false },
    ],
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

7-3. Modify configuration of Prettier

Modify .prettierrc.js as follows:

module.exports = {
  arrowParens: 'always',
  trailingComma: 'all',
};

7-3. Modify npm-scripts of package.json

Modify npm-scripts of package.json as follows:

{
  "scripts": {
    "eslint": "eslint src --ext .ts,.tsx,.js,.jsx --ignore-path .gitignore .",
    "eslint:fix": "yarn eslint --fix",
    "prettier": "prettier --write \"{,src//,public//}*.{js,jsx,ts,tsx,json,yaml,md}\" --ignore-path .gitignore"
  }
}
Write a comment

8. Add Jest

Execute the following commands on your terminal:

# install jest and related modules
yarn add --dev jest jest-dom jest-css-modules

# install typescript support of jest
yarn add --dev ts-jest @types/jest

# insall React Testing Library
yarn add --dev @testing-library/react

# create configuration files of Jest
touch jest.config.js && mkdir src/__tests__

# create a sample test file
touch src/__tests__/Sample.test.tsx

8-1. Configure Jest

Modify jest.config.js as follows:

module.exports = {
  globals: {
    // configuration to change some TypeScript settings at test time
    'ts-jest': {
      tsConfig: {
        jsx: 'react',
      },
    },
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
  moduleNameMapper: {
    // prevent css files from being read during test
    '\\.css$': '<rootDir>/node_modules/jest-css-modules',
    // set the src directory to the root of the alias
    '^~/(.+)': '<rootDir>/src/$1',
  },
  preset: 'ts-jest',
  roots: ['<rootDir>/src'],
};

8-2. create sample test

Modify src/__tests__/Sample.tset.tsx as follows:

import * as React from 'react';
import { render, cleanup } from '@testing-library/react';
import Index from '~/pages/index';
import { RecoilRoot } from 'recoil';

afterEach(cleanup);

describe('Index page', (): void => {
  it('link to Next.js site', (): void => {
    const { getByText } = render(
      <RecoilRoot>
        <Index />
      </RecoilRoot>
    );
    expect(getByText('My page').getAttribute('class')).toBeDefined();
  });
});

8-3. Modify npm-scripts of package.json

Modify npm-scripts of package.json as follows:

{
  "scripts": {
    "test": "jest src/__tests__/.*/*.test.tsx?$"
  }
}
Write a comment

9. Add Husky

Execute the following commands on your terminal:

yarn add --dev husky

9-1. Modify npm-scripts of package.json

Modify npm-scripts of package.json as follows:

{
  "scripts": {
    "pre-commit": "yarn prettier --fix && yarn eslint:fix && yarn build"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn pre-commit",
      "pre-push": "yarn test"
    }
  }
}
Write a comment

10. Add react-aria and react-stately

It is recommended to use react-aria and react-stately for the actual implementation of the UI. To help you separate the UI from the logic and to not have to worry about the behavioral differences between devices, we've provided a couple of mechanisms to help you use react-aria and react-stately.

Write a comment

Conclution

Happy Hacking!!

Write a comment
この記事が気に入ったら応援お願いします🙏
11
ツイート
LINE
Developer
Price Rank Dev
I use Next.js (React) and Firebase (Firestore / Auth) for development. We are also developing APIs for Ruby on Rails and GraphQL.　Our team members are 6 Vietnamese and Japanese engineers.
/Next.js
/[Sep 2020]Building a front-end environment based on Next.js
中古
¥58,800

【中古】 (ソニー) SONY ILCE-7M2 α7II ボディ【中古カメラ デジタル一眼】 ランク：C

カメラのナニワ
α7 IIの最安値リスト
中古
¥1,999

スマートフォン F-04J

メルカリ
らくらくスマートフォン4 F-04Jの最安値リスト
中古
¥46,080

〔展示品〕 Lenovo Yoga Tab 13 128GB シャドーブラック ZA8E0029JP Wi-Fi ［13インチ液晶／Snapdragon 870］〔展示品〕 Lenovo Yoga Tab 13 128GB シャドーブラック ZA8E0029JP Wi-Fi ［13インチ液晶／Snapdragon 870］

ソフマップ
Yoga Tab 13の最安値リスト
中古
¥7,000

Chromebookノートパソコン(最終値下げ)

メルカリ
Chromebookの最安値リスト
中古
¥357,380

【中古】 【並品】 キヤノン EOS R5 ボディ 【ミラーレス一眼】 【6ヶ月保証】

カメラのキタムラ
EOS R5の最安値リスト
中古
¥17,400

Galaxy Watch 4 SM-R890NZSAXJP Classic 46mm ガラスフィルム ベルト2本 充電器付き

PayPayフリマ
GalaxyWatch4 Classicの最安値リスト
中古
¥6,980

Apple TV 4K 64GB MP7P2J／A

リコレ(ソフマップ)
Apple TV 4Kの最安値リスト
中古
¥65,000

Mac mini M2 8GB 256GB

メルカリ
Mac mini M2の最安値リスト
中古
¥19,580

中古 Fujitsu LIFEBOOK A577/S 163934 状態： Cランク

ドスパラ
LIFEBOOK U9310の最安値リスト
新品
¥8,800

【非常に良い｜良い｜可】OPPO A54 5G

WORLDMOBILE
OPPO A54 5Gの最安値リスト
中古
¥13,200

APPLE WATCH SE(1ST) MKQ13J/A(ｼﾞｬﾝｸ) APPLE

ハードオフ
Apple Watch SEの最安値リスト
中古
¥56,800

LAVIE T12 T1295/DAS PC-T1295DAS 中古Bランク 256GB Wi-Fiモデル

イオシス
LAVIE Tab T12の最安値リスト
中古
¥5,500

GTX1060 3gb ZOTAC

メルカリ
GeForce GTX 1060 搭載グラボの最安値リスト
中古
¥16,200

Nintendo Switch Lite ディアルガ・パルキア Nintendo Switch

アマゾン
Nintendo Switch Lite ディアルガ・パルキアの最安値リスト
中古
¥159,980

GeForce RTX 4080 SUPER Panther OC NED408SS19T2-1032Z-G

リコレ(ソフマップ)
GeForce RTX 4080 SUPER 搭載グラボの最安値リスト
新品
¥9,790

【新品】Nintendo Switch ニンテンドースイッチ Joy-Con(L) ネオンレッド/(R) ネオンブルー【任天堂】

エルエルハット
Nintendo Switchの最安値リスト
もっと見る