Заявление о целях
Создать приложение next.js совсем несложно, но если вы захотите добавить в него другие ресурсы для разработки, у начинающих будет некоторая головная боль. Например; TypeScript - интеграция с Next.js, импорт файлов css в ваш проект next.js или использование Styled-Components. Позвольте мне шаг за шагом показать, как это сделать.
Https://github.com/aliatakan/nextjs-project-structure
Установка
- Прежде всего, создайте папку проекта и перейдите в нее. Я выбрал «структуру следующего проекта» в качестве имени папки.
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 и т. Д.