Required, except for statically imported images or images with the fill property.
Количество посещений ~ 3М в месяц.
Предназначен ли Next для таких нагрузок?
Какие альтернативы?
Какой мощности сервер понадобится для такой нагрузки?
Хотелось бы иметь возможность устанавливать это приложение так: npm install
заказчику требуется также CMS
или подключить все на WordPress, но там все как-то сделано через одно место
// app/layout.js
'client'
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "@/base.scss";
import { Provider } from 'react-redux';
import { store } from '../redux/store';
import Layout from "@/components/Layout";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Home | PlayCloud",
description: "Unique web application for listening to a huge amount of music in a unique format",
}
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en">
<body className={inter.className}>
<Provider store={store}>
<Layout>
{children}
</Layout>
</Provider>
</body>
</html>
)
}Cannot destructure property 'store' of 'useReduxContext2(...)' as it is null?
подскажите, как лучше сделать все таки
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 страницы. Хочу ускорить загрузку страниц, но не понимаю, какой рендеринг для этого использовать