Next.js - это фантастический фреймворк для создания быстрых и мощных веб-приложений JAMStack - это одна из многих причин, по которой мы используем JavaScript-фреймворк в Echobind. Мы обернули Next.js набором инструментов, который мы регулярно используем, в генератор JAMStack под названием Bison, который делает Next.js еще более мощным. В этой статье я покажу вам, как создать собственный блог с помощью Bison и Next.js.
Если вы хотите сразу перейти к коду, вот репо на GitHub.
Запустите генератор зубров
yarn create bison-app bison-blog
Это сгенерирует скелет вашего приложения, запустит yarn install
и автоматически создаст репозиторий Git.
Настройте свою базу данных
Вы захотите проверить последнюю версию README, чтобы узнать о полных шагах, но это так же просто, как убедиться, что PostgresSQL запущен (я настоятельно рекомендую Postgres.app) и запущен yarn db:setup
.
Во время настройки вам будет задано несколько вопросов, а остальную работу он сделает за вас.
Запустите приложение
Запустите yarn dev
из только что созданного каталога и посетите http: // localhost: 3000. Ваше приложение запущено, и вы должны увидеть экран, подобный показанному ниже. Мы в деле.
Создайте учетную запись пользователя
Bison поставляется с предустановленным простым механизмом аутентификации пользователя, поэтому вход в систему или подписка не составляет труда.
Сначала нажмите Войти, чтобы перейти на экран входа в систему, затем нажмите Зарегистрироваться.
Заполните форму и отправьте, и вы войдете в систему и будете перенаправлены на главную страницу.
Добавьте несколько таблиц базы данных
Нам понадобится Posts
таблица и модель, чтобы создавать и перечислять сообщения. Отредактируйте schema.prisma
, который является источником истины для модели данных. Добавить модель Post
довольно просто.
Затем запустите yarn prisma migrate save --experimental
, чтобы сгенерировать для него миграцию базы данных.
Теперь запустите миграцию, используя yarn db:migrate
.
Если вы посмотрите на свою базу данных с помощью Postico или psql
, вы увидите результирующую таблицу и столбцы.
Создать страницу для создания постов
Используйте генератор страниц Bison, чтобы заглушить /posts/new
страницу:
yarn g:page posts/new
Сгенерировать компоненты
Нам понадобятся 2 компонента React для создания и отображения сообщений PostList
и PostForm
, поэтому мы будем создавать их с помощью команд интерфейса командной строки Bison. Эти упакованные в упаковку несколько предварительно упакованных генераторов Hygen, которые поставляются с Bison.
yarn g:component PostList
yarn g:component PostForm
Теперь вы увидите эти 4 новых файла в дереве папок:
Всем привет! Давайте добавим код.
Создайте форму «Новое сообщение»
Контейнер страницы для /posts/new.tsx
довольно прост; Помимо стиля, мы добавляем компонент <PostForm />
, который мы создадим сразу после него.
import React from 'react'; import Head from 'next/head'; import { Heading, Flex } from '@chakra-ui/core'; import { PostForm } from '../../components/PostForm'; function PostsNewPage() { return ( <> <Head> <title>PostsNewPage</title> </Head> <Flex direction="column" justify="center"> <Heading size="lg">New Post</Heading> <PostForm /> </Flex> </> ); } export default PostsNewPage;
Создайте компонент <PostForm />
Полный код находится здесь. Вот несколько основных моментов.
Bison поставляется сreact-hook-form
, поэтому мы создаем форму следующим образом:
<form onSubmit={handleSubmit(onSubmit)}> <FormControl isInvalid={errors.title}> <FormLabel htmlFor="title">Post Title</FormLabel> <Input type="text" name="title" id="title" ref={register({ required: true })} /> <FormErrorMessage>{errors.title && <span>This field is required</span>}</FormErrorMessage> </FormControl> <FormControl isInvalid={errors.body}> <FormLabel htmlFor="body">Post Body</FormLabel> <Textarea name="body" id="body" ref={register({ required: true })} /> <FormErrorMessage>{errors.body && <span>This field is required</span>}</FormErrorMessage> </FormControl> <Button type="submit">Submit</Button> </form>
Поскольку Bison также настраивает nexus-plugin-prisma
для нас, мы добавляем мутацию, чтобы создать такой пост:
export const CREATE_POST_MUTATION = gql` mutation CreatePost($data: PostCreateInput!) { createOnePost(data: $data) { id title body } } `;
В свою очередь, конфигурация graphql-codegen
Bison видит вышеупомянутое и генерирует хороший перехватчик React, который мы можем подключить к 🎉:
import { useCreatePostMutation } from '../types';
Мы используем этот и несколько других хуков для передачи данных в компонент формы:
export function PostForm() { const { register, handleSubmit, errors } = useForm(); const [createPost] = useCreatePostMutation(); const router = useRouter(); const { user: { id: userId } = {} } = useAuth(); // ... }
А вот обработчик onSubmit
, который запускает мутацию createPost
и в случае успеха перенаправляет обратно на главную страницу:
const onSubmit = async (data) => { // Create the post await createPost({ variables: { data: { ...data, author: { connect: { id: userId, }, }, }, }, }); // Redirect to homepage await router.replace('/'); };
Теперь у нас есть форма, которая сохраняет сообщение в базе данных. Вуаля. 🚀
Создайте компонент ‹PostList /›
Теперь, когда у нас есть данные, давайте их отобразим.
Если вы помните, мы уже запускали генератор для компонента <PostList />
. Итак, мы начинаем с импорта <PostList />
на домашнюю страницу и отображения его следующим образом:
Теперь нам нужно получить и отобразить сообщения. При получении данных с помощью Bison мы рекомендуем так называемую ячейку. Ячейка - это понятие заимствовано из Redwood.js. Это декларативный способ объединить запрос GraphQL вместе с состояниями загрузки, успеха и ошибки.
yarn g:cell FetchPosts
создаст /cells/FetchPosts.tsx
, как показано ниже.
Теперь мы заполним ячейку правильным запросом и некоторым форматированием для обработанных сообщений.
Полный код здесь. Важные фрагменты:
export const POSTS_QUERY = gql` query posts { posts { id title body } } `; export const Success = ({ posts }: PostsQuery) => { return ( <Stack> {posts.map((p) => ( <Box p={5} shadow="md" key={p.id}> <Heading>{p.title}</Heading> {p.body} </Box> ))} </Stack> ); };
Не забудьте включить ячейку в <PostList />
компонент:
export function PostList() { return <FetchPostsCell />;}
И мы закончили. Теперь у вас есть блог (очень простой и базовый, но работающий), построенный на Next.js. Добавьте данные и начните получать удовольствие.
Вывод
Bison находится на начальной стадии, но уже является полезным инструментом для быстрого запуска вашего проекта Next.js с такими замечательными функциями, как Prisma, Nexus и Hygen.
Если вы попробуете это руководство, напишите мне, если у вас возникнут какие-либо отзывы или вопросы. Или прокомментируйте прямо здесь.
Биография автора
Майк Кавальер - ветеран веб-разработки, приверженец личного развития и поклонник СДВГ / улучшения мозга, работает старшим инженером-программистом в Echobind.
Он также ведет блог о программном обеспечении на MikeCavaliere.com и улучшениях мозга на ADHDTechies.com.