Error getstaticpaths is required for dynamic ssg pages and is missing for

This article is originally posted at Link

In the last article, we learn how to use getStaticProps() in the Next.js application. In Next.js, we can pre-render a page during build time. We generate all the HTML code and data in advance. And the data is later cached by the server.

This approach works well for the static paths but, it fails when we have to pre-render pages for dynamic paths. And it makes sense. Let’s say there is a blog and, there are multiple articles under it. And it next.js we defined dynamic paths like [blogId].js. As we already know, this path is valid for blog id 1, 2, 3, 4, and so on. There is no way Next.js knows how many pages it has to render.

To accomplish this, getStaticPath() is another function we use in this article.

To create the Next.js app, please follow this article.

Let’s add a directory named blog under the pages folder. And add another route [blogId].js under the blog directory.

Just to start with, please add the following code:

function getBlogIdDetails(props){
    return (
        <div>
            Blog ID details pages
        </div>
    )
}

export  default getBlogIdDetails

Visit the URL, http://localhost:3000/blog/1 and, you will see «Blog ID details pages» on the browser.

Now create another file next.config.js and add the following:

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.node = {
            fs: 'empty', // This is required
        }
        return config
    }
}

Save the previous and create another file blogs_details.json and add the following content:

{

  "blogs": [

    { "id": "1", "title": "My First Blog", "description": "This is the content of first blog" },

    { "id": "2", "title": "My Second Blog", "description": "This is the content of second blog" },

    { "id": "3", "title": "My Third Blog", "description": "This is the content of third blog" },

    { "id": "4", "title": "My Fourth Blog", "description": "This is the content of fourth blog" },

    { "id": "5", "title": "My Fifth Blog", "description": "This is the content of fifth blog" },

    { "id": "6", "title": "My Sixth Blog", "description": "This is the content of sixth blog"}

  ]

}

The above file is our backend file, which we read using Next.js (Remember getStaticProps) and then dynamically load into our app.

Update the contents of the file [blogid].js

function getBlogIdDetails(props){
    return (
        <div>
            <h1><strong>{props.blogDetails.title} </strong> </h1>
            <br/>
            <p>{props.blogDetails.description}</p>
        </div>
    )
}

export async function getStaticProps() {
    return {
        props: {
            blogs: [{id: '1', title: 'title1'}, {id: '2', title: 'title2'}, {id: '3', title: 'title3'}]
        },
    };
}

export  default getBlogIdDetails

And now refresh the page «http://localhost:3100/blog/1».

At this point, you will see ‘Error: getStaticPaths is required for dynamic SSG pages’

Remember we discussed how getStaticProps() fails in dynamic paths.

Let’s get started with getStaticPaths().

Open the file [blogid.js] and import the following:

import fs from 'fs'
import path from 'path'

We need to import fs (to read the file) and path (To get the current working directory function) from node.js.
and then update the getStaticProps() function with:

export async function getStaticProps(context) {
    const { params } = context
    const blogId = params.blogid
    const fileToRead = path.join(process.cwd(), 'blogs_details.json')
    const data = JSON.parse(await fs.readFileSync(fileToRead))
    const blog = data.blogs.find(blog => blog.id === blogId)
    return {
        props: {
            blogDetails: blog
        },
    };
}

And add the function getStaticPaths() afterwards

export async function getStaticPaths() {
    return {
        paths: [
            {  params: { blogid: '1' } },
            {  params: { blogid: '2' } },
            {  params: { blogid: '3' } },
        ],
        fallback: false
    }
}

The getStaticPaths() function tells the Next.js to render the pages defined in paths. This function always returns the object.

Also, don’t forget to add the fallback keyword to the getStaticPaths() function.

The complete file will look like

import fs from 'fs'
import path from 'path'
function getBlogIdDetails(props){
    return (
        <div>
            <h1><strong>{props.blogDetails.title} </strong> </h1>
            <br/>
            <p>{props.blogDetails.description}</p>
        </div>
    )
}
export async function getStaticProps(context) {
    const { params } = context
    const blogId = params.blogid
    const fileToRead = path.join(process.cwd(), 'blogs_details.json')
    const data = JSON.parse(await fs.readFileSync(fileToRead))
    const blog = data.blogs.find(blog => blog.id === blogId)
    return {
        props: {
            blogDetails: blog
        },
    };
}
export async function getStaticPaths() {
    return {
        paths: [
            {  params: { blogid: '1' } },
            {  params: { blogid: '2' } },
            {  params: { blogid: '3' } },
        ],
        fallback: false
    }
}
export  default getBlogIdDetails

The fallback can help us if we have too many blogs in our app, which is quite normal. A blog has 100s or 1000s of articles and it is not a good idea to pre-generate all those pages in advance. We don’t want to pre-generate pages for the year-old blogs or the blogs which are not read enough by the users.

In that case, we set the fallback to true and delete all the other pages from the returned object. In our case let say, we don’t want to pre-generate blog 2 and blog 3 pages.

export async function getStaticPaths() {
    return {
        paths: [
            {  params: { blogid: '1' } }
        ],
        fallback: true
    }
}

And also update the function getBlogIdDetails

function getBlogIdDetails(props){
    const { blogDetails } = props;
    // This will return Loading and prevents the page from being crashed    
    if (!blogDetails ) {
        return <p>Loading....</p>
    }

    return (
        <div>
            <h1><strong>{props.blogDetails.title} </strong> </h1>
            <br/>
            <p>{props.blogDetails.description}</p>
        </div>
    )
}

The above code will only pre-generate the pages for blog 1. Though all the paths to the blogs are still valid.

Thanks for reading up to here. Will see you in the next article.

От автора: Next.js — это фреймворк React, который обязательно упростит вашу жизнь как разработчика. С его помощью можно абстрагировать общие и избыточные задачи (например, маршрутизацию) в относительно более простые и мощные API. Таким образом, вы можете сосредоточиться на написании приложений вместо того, чтобы изобретать колесо.

В последнее время Next.js позиционируется, как React Framework for Production, и с таким смелым заявлением он предлагает множество функций, которые помогут вам вывести ваши веб-сайты на React с нуля до готового состояния. Эти возможности имели бы меньшее значение, если бы Next.js был относительно сложен в освоении благодаря многочисленным функциям, которые подразумевают больше вещей и нюансов для изучения. Но его преимущество в простоте, мощности и большом инструментарии, это определенно является тем, что вам нужно иметь в своем арсенале.

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

Это руководство будет полезно разработчикам, которые хотят начать работу с Next.js или уже начали, но которым необходимо заполнить некоторые пробелы в знаниях. Вам не нужно быть профессионалом в React, однако опыт работы с React пригодится.

Почему именно Next.js?

1. Относительно прост в изучении.

Вот и все. Если вы хоть раз писали React, вы бы почувствовали себя как дома с Next.js. Он предлагает вам расширенные инструменты и надежную поддержку API, но не заставляет вас их использовать.

2. Встроенная поддержка CSS.

Написание CSS в компонентно-ориентированных фреймворках сопряжено с священной потребностью в «каскаде». Вот почему у вас есть инструменты CSS-in-JS, но Next.js выходит со своим собственным предложением — styled-jsx, а также поддерживает множество методологий стилизации.

3. Автоматическая поддержка TypeScript.

Если вам нравится писать код на TypeScript, с Next.js у вас буквально есть автоматическая поддержка конфигурации и компиляции TypeScript.

4. Техника множественной выборки данных.

Он поддерживает SSG и/или SSR. Вы можете использовать один или другой, или оба.

5. Маршрутизация файловой системы.

Переход с одной страницы на другую поддерживается файловой системой вашего приложения. Вам не нужна специальная библиотека для обработки маршрутизации.

Есть еще много других функций, например, использование экспериментальных функций ES, таких как необязательная последовательность, отсутствие импорта React везде, где вы используете JSX, поддержка API типа next/head, он помогает управлять заголовками HTML-документа и так далее. Достаточно сказать, что чем глубже вы погружаетесь, тем больше вы наслаждаетесь, цените и открываете для себя многие другие функции.

Требования для создания приложения Next.Js.

Для создания приложения Next.js требуется установка Node.js. и утилиты для запуска npm или npx. Чтобы проверить, установлен ли у вас Node.js, запустите команду в своем терминале:

В идеале npm (и npx) поставляется вместе с установкой Node.js. Чтобы убедиться, что они установлены, выполните команды в терминале:

Если ни одна из вышеперечисленных команд не отвечает с номером версии, вы можете изучить порядок установки Node.js и npm. Если вы предпочитаете менеджер пакетов yarn, вы можете запустить его с помощью команды:

Затем подтвердите установку с помощью:

Создание приложения Next.Js

Выполнив указанные выше требования, создать Next.js можно двумя способами, первый из них более простой: c помощью create-next-app или вручную.

Создание приложения Next.js c помощью Create-next-app.

Использовать create-next-app просто и понятно, к тому же вы также можете использовать стартер, например Next.js с Redux, Next.js с Tailwind CSS или Next.js с Sanity CMS и т. д. Вы можете просмотреть их полный список в примерах Next.js repo.

Создание проекта Next.js вручную.

Для этого требуется три пакета: next, react и react-dom.

Затем добавьте следующие скрипты в package.json:

Структура папок

Одна важная особенность, которую вы можете заметить после создания приложения Next.js — это компактная структура папок. У вас есть минимум для запуска приложения Next.js. Ни больше ни меньше. То, что вы получите по мере роста приложения, зависит от вас больше, чем от фреймворка.

Единственными конкретными папками Next.js являются папки pages, public и styles.

Страницы

В приложении Next.js страницы — это специфические папки для Next. Вам необходимо знать некоторые вещи о страницах. Страницы — это компоненты React. Каждый файл в нем — это страница, а каждая страница — это компонент React.

Пользовательские страницы — это специальные страницы с префиксом подчеркивания, например _app.js.

Файловая система маршрутизации на основе страниц.

Next.js имеет файловую систему маршрутизации, где каждая страница автоматически становится маршрутом в зависимости от имени файла. Например, страница по адресу pages/profile будет расположена по адресу /profile, а pages/index.js по адресу /.

Маршрутизация

Next.js имеет файловую систему маршрутизации на основе страниц. Каждая созданная страница автоматически становится маршрутом. Например, pages/books.js станет маршрутом /book.

Маршрутизация привела к созданию таких библиотек, как React Router. Она может быть пугающей и довольно сложной из-за огромного количества способов, которые вы можете посчитать подходящими для маршрутизации раздела страниц в приложении Next.js. Говорить о маршрутизации в Next.js довольно просто. По большей части, файловая система маршрутизации может использоваться для определения наиболее распространенных шаблонов маршрутизации.

Индексные маршруты

В папке pages автоматически создается страница index.js которая перенаправляется в начальную точку вашего приложения /. У вас могут быть разные index.js страницы, но по одной в каждой папке. Вам не обязательно это делать, но это помогает определить начальную точку ваших маршрутов и избежать некоторой избыточности в именах. Возьмем, к примеру, эту структуру папок:

Есть два индексных маршрута / и /users. В папке users можно назвать индексный маршрут users.js. Тогда его путь будет /users/users, если это удобно для чтения. В противном случае вы можете использовать индексный маршрут.

Вложенные каталоги

Чтобы структурировать папку, и иметь такой маршрут, как /dashboard/user/:id, вам нужны вложенные папки:

Вы можете создавать много каталогов и углубляться сколько угодно.

Сегменты динамического маршрута

Сегменты URL-адреса не всегда определенны. Иногда просто невозможно сказать, что будет в процессе разработки. Именно здесь на помощь приходят сегменты динамического маршрута. В последнем примере :id является динамическим сегментом в URL-адресе /dashboard/user/:id. id определяет пользователя, который будет находиться на странице в данный момент. Если вы можете подумать об этом, скорее всего, вы сможете создать его с помощью файловой системы.
Динамическая часть может появляться в любом месте вложенных маршрутов:

Данный пример предоставляет путь /dashboard/user/:id/profile, который ведет к странице профиля пользователя с определенным идентификатором.

Представьте, как получить доступ к маршруту /news/:category/:category-type/:league/:team, где category, category-type, league и team являются динамическими сегментами. Каждый сегмент будет файлом, и файлы не могут быть вложенными. Здесь вам понадобятся универсальные маршруты, в которых вы распределяете динамические части, например:

Тогда вы можете получить доступ к маршруту, например /news/sport/football/epl/liverpool. Вам может быть интересно, как получить динамические сегменты в компонентах. Для этой цели предназначен анкор useRouter, экспортируемый из next/router. Он открывает объект router.

Динамические сегменты находятся в свойстве query объекта router, доступ к которому осуществляется с помощью router.query. Если запросов нет, свойство запроса возвращает пустой объект.

Ссылки между страницами

Перемещение между страницами в приложениях может выполняться с помощью компонента Link, экспортированного с помощью next/link. Скажем, у вас есть страницы:

Вы можете использовать Link:

Компонент Link имеет ряд допустимых свойств, href — URL-адрес гиперссылки — является единственным необходимым. Он эквивалентен атрибуту href элемента HTML anchor (<a>). Другие свойства включают:

Стили

Next.js поставляется с тремя стандартными методами стилизации, глобальным CSS, модулями CSS и styled-jsx.

Линтинг и форматирование

Линтинг и форматирование, я подозреваю, это очень сложная тема, но эмпирические данные показывают, что большинство людей, которые нуждаются в этом в JavaScript, кажется, наслаждаются компанией ESLint и Prettier. Если последний идеально форматирует, то первый выравнивает вашу кодовую базу. Я привык к ESLint и Prettier Setup Уэса Боса, потому что он расширяет eslint-config-airbnb, интерполирует более красивое форматирование через ESLint, включает разумные значения по умолчанию, которые в основном подходят (для меня) и может быть отключен, если возникнет необходимость.

Включить его в проект Next.js довольно просто. Вы можете установить его глобально, если хотите, но мы будем делать это локально. Выполните приведенную ниже команду в терминале.

Создайте файл .eslintrc в корневом каталоге приложения Next.js, наряду с папками pages, styles и public с содержимым:

На этом этапе вы можете либо выполнить линтинг и форматирование кода вручную, либо позволить редактору взять на себя управление. Для линтинга и форматирования вручную требуется добавить два скрипта npm — lint и lint:fix.

Если вы используете VSCode и предпочитаете, чтобы ваш редактор автоматически проверял и форматировал код, вам необходимо сначала установить плагин ESLint VSCode, а затем добавить следующие команды в настройки VSCode:

Со временем вам, скорее всего, потребуется переопределить некоторую конфигурацию, например, мне пришлось отключить правило response/jsx-props-no-spreading, которое выводит ошибки, когда свойства JSX распространяются, как в случае pageProps, пользовательского компонента страницы _app.js.

Отключение правила происходит следующим образом:

Статические файлы

На некоторых или нескольких этапах жизненного цикла вашего приложения Next.js вам понадобятся какие-либо файлы. Это могут быть иконки, собственные шрифты, изображения и т.д. В Next.js это называется Обслуживание статических файлов и есть единственный источник для них – папка public. Документация Next.js предупреждают: не называйте каталог public иначе. Его имя нельзя изменять, и это единственный каталог, используемый для обслуживания статических ресурсов.

Доступ к статическим файлам прост. Возьмем, к примеру, структуру папок ниже.

Вы можете получить доступ к изображению profile-img.png из компонента <Profile/>:

или к шрифтам в папке fonts из CSS:

Получение данных

Получение данных в Next.js — это огромная тема, требующая определенного уровня подготовки. Здесь мы обсудим суть. Прежде чем мы погрузимся в подробности, необходимо сначала понять, как Next.js отображает страницы.
Предварительный рендеринг — важная часть того, как работает Next.js, а также то, что делает его быстрым. По умолчанию Next.js выполняет предварительный рендеринг каждой страницы, заранее генерируя HTML- код каждой страницы вместе с минимальным кодом JavaScript, который необходимо запустить, с помощью процесса, известного как Hydration.

Можно отключить JavaScript, хоть это и непрактично, но при этом некоторые части вашего приложения Next.js будут отображаться. Это можно сделать только из механических соображений, чтобы показать, что Next.js действительно гидрирует отображаемые страницы.

При этом существует две формы предварительного рендеринга: 1) Статическая генерация (SG), 2) Отрисовка на сервере (SSR).

Разница между ними заключается в извлечении данных. Для SG данные извлекаются во время сборки и повторно используются при каждом запросе (что делает его быстрее, поскольку его можно кэшировать), тогда как в SSR данные выбираются при каждом запросе.

Что у них общее, так это то, что их можно совмещать с рендерингом на стороне клиента с помощью fetch, Axios, SWR, React Query и т.д.

Две формы предварительного рендеринга не являются абсолютно взаимоисключающими; вы можете выбрать использование статической генерации или серверный рендеринг, или вы можете их совмещать. То есть, в то время как некоторые части вашего приложения Next.js используют статическую генерацию, другие могут использовать SSR.

В обоих случаях Next.js предлагает специальные функции для получения данных. Вы можете использовать один из традиционных подходов к извлечению данных в React или специальные функции. Желательно использовать специальные функции не потому, что они предположительно особенные, и не потому, что они правильно названы (как вы увидите), а потому, что они дают вам централизованный и привычный метод выборки данных, с которым вы не ошибетесь.

Три специальные функции:

getStaticProps

getStaticProps является родственным getStaticPaths и используется в Static Generation. Это асинхронная функция, с помощью которой вы можете извлекать внешние данные и возвращать их в качестве поддержки для компонента по умолчанию на странице. Данные возвращаются как объект props и неявно сопоставляются со свойством компонента экспорта по умолчанию на странице.

В приведенном ниже примере нам нужно сопоставить учетные записи и отобразить их. Содержимое страницы зависит от внешних данных, которые мы извлекаем и применяем getStaticProps.

Как видите, getStaticProps работает со статической генерацией и возвращает объект props, отсюда и название.

getStaticPaths

Подобно getStaticProps, getStaticPaths используется в статической генерации, но отличается тем, что это пути к страницам, которые являются динамическими, а не содержимым страницы. Это часто используется с getStaticProps, потому что он не возвращает никаких данных самому компоненту, вместо этого он возвращает пути, которые должны быть предварительно отрисованы во время сборки. Зная пути, вы можете продолжить получение соответствующего содержимого страницы.

Подумайте о предварительном рендеринге страницы Next.js в аспекте динамической страницы в отношении статической генерации. Чтобы он мог это сделать успешно во время сборки, он должен знать, каковы пути к страницам. Но это невозможно, потому что они динамичны и неопределенны, вот тут-то и нужно getStaticPaths.

Представьте, у вас есть приложение Next.js со страницами States и state, которые отображают список штатов в Соединенных Штатах и все государство соответственно. У вас может быть структура папок, которая выглядит так:

Вы создаете, [id].js чтобы показать одно состояние на основе их id. Таким образом, содержимое страницы (возвращаемые данные getStaticProps) будет зависеть от путей к страницам (возвращаемых данных getStaticPaths). Сначала создадим компоненты <States/>.

Теперь давайте создадим динамическую страницу для одного состояния. Это причина, по которой у нас есть [id].js, чтобы мы могли сопоставить путь /states/1, или /states/2 где 1 и 2 — это id в [id].js.

Если вы попытаетесь запустить код как есть, вы получите сообщение: Error: getStaticPaths is required for dynamic SSG pages and is missing for /states/[id].

С помощью paths возвращенного от getStaticPaths, getStaticProps будет известно и его params параметры будут заполнены необходимыми значениями, как и id в этом случае.

Дополнения

Абсолютный импорт

Начиная с Next.js 9.4 поддерживается абсолютный импорт, что означает, что вам больше не нужно импортировать такие компоненты, как:

вместо этого вы можете сделать это абсолютно так:

Чтобы это работало, вам понадобится файл jsconfig.json или tsconfig.json для JavaScript и TypeScript соответственно со следующим содержимым:

Это предполагает, что папка components существует в корне вашего приложения вместе с pages, styles и public.

Экспериментальные функции ES

В приложении Next.js можно использовать некоторые экспериментальные функции, такие как Оператор нулевого объединения (??) и Оператор опциональной цепочки (?.).

Заключение

По словам команды Next.js, многие из целей, которые они поставили перед собой, были перечислены в «7 принципах создания полнофункциональных веб-приложений», и по мере того, как вы продвигаетесь в экосистеме и вглубь ее, вы поймете, что вы в надежных руках, как и многие другие пользователи, которые решили использовать Next.js для работы своих веб-сайтов / веб-приложений. Попробуйте, и после этого примите решение.

Автор: Adebiyi Adedotun

Источник: www.smashingmagazine.com

Редакция: Команда webformyself.

I have an edit page that will be rendered with an id parameter and it works fine when application is running but while building the nextjs app I get this error

[Error: ENOENT: no such file or directory, rename ‘C:UsersAhsan NisarDocumentsGitHubcustomer-portalfrontend.nextexportencompaniesedit[id].html’ -> ‘C:UsersAhsan NisarDocumentsGitHubcustomer-portalfrontend.nextserverpagesencompaniesedit[id].html’]

the full error

I am not sure what this error is related to or what mistake am I making in my code that this error is occuring during build time.

Here is the code of my page

import { WithAuthorization } from 'common/roq-hocs';
import { MainLayout } from 'layouts';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import React, { FunctionComponent } from 'react';
import { CompaniesEditView } from 'views/companies-edit';

const CompanyCreatePage: FunctionComponent = () => {
  const { t } = useTranslation('companiesEdit');
  return (
    <MainLayout title={t('title')}>
      <WithAuthorization
        permissionKey="companies.update"
        failComponent={
          <div className="mt-16 text-2xl text-center text-gray-600">
            <span>{t('noView')}</span>
          </div>
        }
      >
        <CompaniesEditView />
      </WithAuthorization>
    </MainLayout>
  );
};

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common', 'companiesEdit'])),
  },
});

export const getStaticPaths = () => ({
  paths: ['/companies/edit/[id]'],
  fallback: true,
});

export default CompanyCreatePage;

4 Answers

export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {

    return {
        paths: [], //indicates that no page needs be created at build time
        fallback: 'blocking' //indicates the type of fallback
    }
}

import React from 'react'

const User = ({ user }) => {
  return (
    <div className="row">
      <div className="col-md-6 offset-md-3">
        <div className="card">
          <div className="card-body text-center">
            <h3>{user.name}</h3>
            <p>Email: {user.email} </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users')
  const users = await res.json()

  const paths = users.map((user) => ({
    params: { id: user.id.toString() },
  }))

  return { paths, fallback: false }
}


export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`)
  const user = await res.json()

  return { props: { user } }
}

export default User

export async function getServerSideProps({
locale,
}: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Record<string, unknown>>> {

return {
    props: {
        ...(await serverSideTranslations(locale || 'de', ['common', 'employees'], nextI18nextConfig)),
    },
  }
}