Как в Next.js создать шаблон страницы, который будет использоваться для генерации данных с определенным маршрутом?

В Next.js можно создавать динамические маршруты с использованием файловой системы и динамического роутинга.

Для создания страницы с определенным маршрутом, вы должны создать файл с расширением `.js`, `.jsx`, `.ts` или `.tsx` в директории `pages`. Например, для создания страницы `app/blog/news-1`, вы должны создать файл `news-1.js` или `news-1.jsx` в директории `pages/app/blog`.

Внутри файла страницы вы можете экспортировать React компонент, который будет представлять шаблон вашей страницы. Например:

```javascript
function NewsPage({ news }) {
  return (
    <div>
      <h1>{news.title}</h1>
      <p>{news.content}</p>
    </div>
  );
}

export async function getStaticProps() {
  // Получите данные из вашего источника, например, из API или файла
  const news = { title: "Новость 1", content: "Содержимое новости 1" };

  return {
    props: {
      news
    }
  };
}

export default NewsPage;
```

В этом примере мы создали компонент `NewsPage`, который принимает данные `news` в качестве пропсов и отображает их на странице. Мы также указываем функцию `getStaticProps`, которая будет вызвана на этапе сборки исходных файлов и позволит предоставить данные для страницы.

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

```javascript
function DynamicPage({ slug }) {
  return <h1>{slug}</h1>;
}

export async function getStaticPaths() {
  // Определите доступные маршруты slug для вашей страницы
  const paths = [
    { slug: "news-1" },
    { slug: "news-hot" },
    { slug: "news-last" }
  ];

  return {
    paths,
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  // Используйте params.slug, чтобы получить данные для этого маршрута
  const { slug } = params;

  return {
    props: {
      slug
    }
  };
}

export default DynamicPage;
```

В этом примере мы создали компонент `DynamicPage`, который получает параметр `slug` в качестве пропса и отображает его на странице.

В функции `getStaticPaths` мы определяем доступные маршруты `slug` для этого файла страницы. В нашем примере это `news-1`, `news-hot` и `news-last`. Значение `fallback: false` означает, что любой другой маршрут, который не указан в `paths`, будет отображать ошибку 404.

Функция `getStaticProps` вызывается на этапе сборки исходных файлов и использует `params.slug`, чтобы определить, какие данные необходимо отобразить на странице.

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

Если вы используете Next.js версии 13 и добавляете директорию "app" в свой проект, вам больше не нужно использовать функции getStaticProps и getServerSideProps для получения данных. В Next.js 13 все компоненты по умолчанию работают на серверной стороне, и вы можете использовать расширенный fetch для получения данных в любом месте. И самое интересное в том, что как на клиентской, так и на серверной стороне, вы получаете уже отрендеренный HTML. 

Вы можете создать компонент layout.tsx в директории "app/blog", а все вложенные папки будут являться "children", которые прокидываются в этот layout.tsx. Это можно рассматривать, как вложенные страницы, но на самом деле это просто обертка.

```javascript
const BlogLayout = ({ children }) => {
    return (
        

            
            {children}
        
    )
};

export default BlogLayout ;
```

Не забудьте обернуть весь контент в этот компонент layout.tsx, чтобы он стал общей оберткой для всех страниц вашего блога.