nextjs 如何使用
阎星华
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 },
});
类似资料：