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.