nextjs 如何使用

最新推荐文章于 2023-10-05 23:22:13 发布

高级bug制造机

最新推荐文章于 2023-10-05 23:22:13 发布

阅读量327

点赞数

分类专栏： js 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_42689772/article/details/128238380

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

npx create-next-app@latest --typescript

如果想要使用其他版本react

npm install next@12.1.4 react@17.0.2 react-dom@17.0.2 --exact
npm install --save-dev @types/react@17.0.39 --exact

中文文档更新较慢，建议看英文版

Head

//layout.tsx
import Head from "next/head";
      <Head>
        <title>Auskey</title>
        <meta name="description" content="auskey" />
        <link rel="icon" href="/favicon.ico" />
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/xx.css"
        />
      </Head>

国际化 next-i18next

翻译文件位置 /public/locales/cn or /public/locales/en

// next-i18next.config.js
// @ts-check

/**
 * @type {import('next-i18next').UserConfig}
 */
module.exports = {
  // https://www.i18next.com/overview/configuration-options#logging
  debug: process.env.NODE_ENV === "development",
  i18n: {
    defaultLocale: "cn",
    locales: ["cn", "en"],
    browserLanguageDetection: false,
    serverLanguageDetection: false,
    localeDetection: false,
    domains: [
      {
       domain: '/', 
       defaultLocale: 'cn' // This locale will be appeared at the exact above domain.
      },]
  },
  /** To avoid issues when deploying to some paas (vercel...) */
  localePath:
    typeof window === "undefined" ? require("path").resolve("./public/locales") : "/locales",

  reloadOnPrerender: process.env.NODE_ENV === "development",


};

//next.config.js

/** @type {import('next').NextConfig} */

const { i18n } = require('./next-i18next.config.js')

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  i18n,

}
module.exports =nextConfig

sass

npm i sass -D
//在 next.config.js 添加
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },

国际化如何使用

//_app.tsx
...
import Layout from "../components/layout";
import type { AppProps } from "next/app";
import { appWithTranslation } from "next-i18next";

function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}
export default appWithTranslation(App);

//index.tsx

import type { GetStaticProps, InferGetStaticPropsType } from "next";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

import { useRouter } from "next/router";

type Props = {
  // Add custom props here
};
export default function Home({}) {
  const router = useRouter();

  const { t } = useTranslation("common");

  return (
    <div className="home">
     
            {t("P1")}
        
      </div>

    </div>
  );
}

export const getStaticProps: GetStaticProps<Props> = async ({ locale }: any) => {
  return {
    props: {
      ...(await serverSideTranslations(locale ?? "en", ["common"])),
    },
  };
};

//组件中使用
//header.tsx
import { useTranslation } from "next-i18next";

export default function Header() {
  const { t } = useTranslation("common");

  return (
   <div>
   {t('p1')}
    </div>
  );
}

css

Next.js 通过 [name].module.css 文件命名约定来支持 CSS 模块。
使用

import styles from './Button.module.css'
export function Button() {
  return (
    <button
      type="button"
      className={styles.error}
    >
      Destroy
    </button>
  )
}

css in js

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

也可以把所有写的css 引入global.css 就可以直接用了 className=“error”

路由

import Link from "next/link";
<Link href="/home"></Link>
 <Link href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >

import { useRouter } from "next/router";
const router = useRouter();
router.push("/home");
   router.push({
      pathname: "/news/",
      query: { id: id },
    });