Build error occurred
Error: Page "/client/[clientId]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
// /pages/client/[clientId].js
export async function getStaticPaths() {
const clientIds = await fetchClientIdsFromDatabase();
return {
paths: clientIds.map(clientId => ({params: {clientId: clientId}})),
fallback: false,
};
}// next.config.js
export default {
output: 'export',
}
// или
module.exports = {
output: 'export',
}в файловом менеджере на vps, где файлы самого next я нашел скрипт, который надо поменять, поменял его
const Icon = ({title, href, active}) => {
const className = active ? 'active' : '';
return (
<Link href={href} className={`svgh m-auto ${className}`}>
{/* svg */}
</Link>
);
}'use client'
import React, {useState, useEffect} from 'react';
import Icon from './icons/Icon';
const links = [
{href: '#home_anchor', svgIcon: 'home'},
{href: '#user_anchor', svgIcon: 'user'}
// others
];
const Navbar = () => {
const [activeLink, setActiveLink] = useState('');
useEffect(() => {
const handleScroll = () => {
// logic scroll
}
// add anchor
window.addEventListener('scroll', handleScroll);
// remove anchor from unmount
return () => window.removeEventListener('scroll', handleScroll)
}, []);
return (
<nav className="flex flex-col fixed bg-gray-800 align-center">
{links.map((l) => (
<Icon href={l.href} key={l.svgIcon} title={l.svgIcon} active={activeLink === l.href}/>
))}
</nav>
);
}В первую очереди улучшить UI за счёт React библиотек
Но в общем, я не хочу тратить время на написание сервера на каком-то NodeJS и т.д.
// _app.js
import {HeadProvider} from './HeadProvider';
function App({Component, pageProps}) {
return (
<HeadProvider>
<Component {...pageProps} />
</HeadProvider>
);
}// HeadProvider.js
import React, {createContext, useContext, useState} from 'react';
const HeadContext = createContext();
export const useHead = () => useContext(HeadContext);
export function HeadProvider({children}) {
const [headData, setHeadData] = useState({
title: 'Init title',
description: 'Init description',
keywords: 'Init keywords'
});
return (
<HeadContext.Provider value={{headData, setHeadData}}>
{children}
</HeadContext.Provider>
);
}// MyBestHead.js
import Head from 'next/head';
import {useHead} from './HeadProvider';
export function MyBestHead() {
const {headData} = useHead();
return (
<Head>
<title>{headData.title}</title>
<meta name="description" content={headData.description}/>
{/* more head items */}
</Head>
);
}// MyComponent.js
import React, {useCallback} from 'react';
import {useHead} from './HeadProvider';
export function MyComponent() {
const {setHeadData} = useHead();
const handleClick = useCallback(() => {
setHeadData({
title: 'New title',
description: 'New description',
keywords: 'New keywords'
});
}, [setHeadData]);
return (
<button onClick={handleClick}>Update Head Data</button>
);
}Если я правильно понимаю работу Next.js: компоненты без состояния рендерятся на сервере и могут индексироваться поисковыми роботами
А с состоянием - на стороне клиента, и роботы их не видят.
Однако в компоненте самой страницы ArticlePage у меня в любом случае будет использование useState. Значит ли это, что вся страница будет отрисовываться на клиенте?
И что поисковые роботы обойдут контент страницы стороной?
P.S. Вопрос, возможно, глупый, но я правда не понимаю...
в папке images в папке проекта
<img src="/images/img.jpg" alt="" width="100px" height="100px"/>
// or
import Image from 'next/image';
<Image src="/images/img.jpg" alt="" width={100} height={100}/>Изучил основы JavaScript, понял что всякие манипуляции DOM мне не нужны, потому что это не используется больше
Думаю такой, может мне надо выучить React?
Но есть почему-то ощущение что React в чистом виде мне не нужен, чтобы пользоваться Next.js.
Я остановился и понял что я занимаюсь какой-то фигней. Что я хватаю отовсюду понемногу знаний, но они не складываются в общую картинку.
Собственно вопрос: по какому пути лучше пойти, чтобы потихоньку прийти к желаемому?
При этом чтобы не потратить время впустую на изучения вещей, которые абсолютно не нужны.
Next JS это только про SSR
Next JS это тот же реакт в котором сразу есть все необходимые пакеты для работы с ним или он все же медленней обычного spa приложения на реакте с пакетами?
что в нексте реакт всегда обращается к своему серверу для SSR
а у обычного реакта мы фетчем просто запросы шлем, когда все spa приложение очень быстро работает без лишних запросов на сервер
Делаю форму регистрации на Next.js, 4 страницы. Хочу ускорить загрузку страниц, но не понимаю, какой рендеринг для этого использовать
$breakpoint_sm: 300px;
$breakpoint_md: 700px;
$breakpoint_xl: 1000px;@import "breakpoints";
@media screen and (max-width: $breakpoint_md) {
// ...
}@import "fonts";
@import "breakpoints";import { FC } from "react";
import { AppProps } from "next/app";
import "./styles/index.scss";
const App: FC<AppProps> = ({ Component, pageProps }) => (
<Component {...pageProps} />
);
export default App;Но тут видите, мы все равно подключаем
Dmitrijs Balcers "breakpoints"; в BestComponent, а надо без импорта, сразу
:root {
--breakpoint-sm: 300px;
--breakpoint-md: 700px;
--breakpoint-xl: 1000px;
}@media screen and (max-width: var(--breakpoint-md)) {}{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
additionalData: `@import "path/breakpoints.scss";`
}
}
]
}export const getServerSideProps = async (context) => {
const page = context.query.page || 1;
try {
const res = await axios.get(`tracks?page=${page}`);
return {
props: {
tracks: res.data.items,
},
}
} catch (e) {
return {
notFound: true,
}
}
}
export const getStaticProps = async (context) => {
const page = context.params.page;
// code
}Зачем вообще нексту еще другой сервер, если некст и так всё может делать сам?