简介

  • 一个简单易用的 React 框架
  • 支持服务端渲染

安装

1
2
3
npx create-next-app@latest
# or
yarn create next-app

使用 TypeScript：

1
yarn create next-app --typescript

Page

相当于 React 中的组件（component）。page 和路由是绑定的，只需要创建对应的 .tsx / .jsx 文件即可。

最简单的 Page：

1
2
3
export default function About() {
  return <div>Hello, world</div>
}

预渲染

默认情况下，Next.js 预渲染 所有页面。这意味着 Next.js 首先生成 HTML。预渲染可以获得更好的性能和更好的 SEO。

数据获取

客户端数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
type Greet = {
  Hello: string
};

export default function FirstPost() {
  const [data, setData] = useState<Greet>({Hello: ''});

  useEffect(() => {
    fetch('http://127.0.0.1:8000/')
      .then((res) => res.json())
      .then((data) => {
        setData(data);
      });
  }, []);
  return (
    <>
     <h1>hello, {data.Hello}</h1>
  );
}

样式

添加全局样式

在 pages/_app.tsx 中 import：

1
2
3
4
5
6
7
import '@/styles/globals.css'
import type { AppProps } from 'next/app'

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

这些样式会应用到所有的页面和组件中。

在 styles 文件夹下：

1
import styles from "@/styles/Home.module.css";

布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

如果只有一个布局的话，可以直接在 pages/_app.js 中进行设置：

1
2
3
4
5
6
7
8
9
10
11
// pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

如果需要使用多个布局，可以添加一个 property getLayout 到你的页面上。

如果使用的是 TypeScript，需要先页面为创建一个新类型，包含一个 getLayout 函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import '@/styles/globals.css'
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

export default function App({ Component, pageProps }: AppPropsWithLayout) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

可以使用多个布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import type { ReactElement } from 'react'
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
import type { NextPageWithLayout } from './_app'

const Page: NextPageWithLayout = () => {
  return <p>hello world</p>
}

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

export default Page

引入 Tailwind CSS

使用 yarn create next-app 建立项目后安装 Tailwind

1
2
3
npm install -D tailwindcss postcss autoprefixer
#
yarn add -D tailwindcss postcss autoprefixer

运行下面命令生成 tailwind.config.js 和 postcss.config.js

1
npx tailwindcss init -p

在 tailwind.config.js 中配置模板路径：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    // 使用 `src` 文件夹的话
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加 Tailwind 指令到 globals.css：

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

在项目中使用 Tailwind：

1
2
3
4
5
6
7
export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

小结

Next.js 使用起来非常方便，主打的功能是 SSR，非常适合用来实现需要 SEO 的场景，比如个人博客、企业官网。