Заявление о целях

Создать приложение next.js совсем несложно, но если вы захотите добавить в него другие ресурсы для разработки, у начинающих будет некоторая головная боль. Например; TypeScript - интеграция с Next.js, импорт файлов css в ваш проект next.js или использование Styled-Components. Позвольте мне шаг за шагом показать, как это сделать.

Https://github.com/aliatakan/nextjs-project-structure

Установка

  1. Прежде всего, создайте папку проекта и перейдите в нее. Я выбрал «структуру следующего проекта» в качестве имени папки.
mkdir next-project-structure
cd next-project-structure

2. Создайте новый package.json файл и добавьте в него несколько кодов.

  • Если у вас еще не установлен node.js, сначала вам нужно установить его. Поэтому я использую macOS;
brew install node
  • Потом,
npm init -y
  • Наконец, добавьте в него несколько кодов (будьте осторожны!)
{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

3. Установите react, react-dom и next

npm install --save react react-dom next

4. Создайте папку с именем pages.

mkdir pages

5. TypeScript - это надмножество JavaScript, и одно из больших преимуществ состоит в том, что IDE предоставляет более богатую среду для выявления распространенных ошибок при вводе кода. Когда размер команды большой, ошибки при печати тоже большие! Это заставляет вас не писать код с опечатками.

  • Нам нужно установить этот пакет, который содержит определения типов для Next.js
npm install --save-dev @types/next

6. next.config.js , tsconfig.json,.babelrc

Установите этот плагин, который реализует babel / preset-typescript с помощью Next.js

npm install --save @zeit/next-typescript
  • Создайте в своем проекте next.config.js. Сделав это, вы можете использовать машинописный текст и CSS в следующем
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()
  • Создайте в своем проекте .babelrc.
{
  "presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ]
}
  • Создайте в своем проекте tsconfig.json.
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  }
}

8. Также установите пакеты react и react-dom, которые содержат определения типов для React и React-dom.

npm install --save-dev @types/react
npm install --save-dev @types/react-dom

9. Проще говоря, Styled-Components - это CSS-in-JS.

npm install --save styled-components
  • Установите плагин Babel, чтобы добавить поддержку рендеринга на стороне сервера, минимизации стиля и более удобной отладки.
npm install --save-dev babel-plugin-styled-components
  • Затем добавьте эти коды в .babelrc
"plugins": [
    [
        "styled-components",
        {
            "ssr": true,
            "displayName": true,
            "preprocess": false
        }
    ]
]

10. Добавьте index.tsx в папку страниц, где в браузере пишется только «Hello Mars».

export default () => <h1>Hello Mars !!!</h1>;

Заключение

Это все. Все, что вам нужно, это выполнить все эти шаги или клонировать этот репозиторий, чтобы запустить проект Next.js, который включает TypeScript, Styled-Components и т. Д.