在前端开发领域，Next.js 是一个备受欢迎的框架。它提供了一种快速创建 React 应用程序的方式，同时也支持服务器端渲染、代码分割和静态网站生成等功能。在本文中，我们将探讨如何基于 Next.js 实现一个简单的商城应用程序。
准备工作
在开始之前，我们需要确保已经安装了 Node.js 和 npm。然后，我们可以使用以下命令来创建一个新的 Next.js 应用程序：
npx create-next-app my-shop cd my-shop
页面结构
在我们的商城应用程序中，我们需要有以下几个页面：
- 首页
- 商品列表页
- 商品详情页
- 购物车页面
- 订单确认页面
我们可以使用 Next.js 提供的页面路由功能来创建这些页面。在 pages 目录下，我们可以创建以下文件：
index.js：首页products.js：商品列表页products/[id].js：商品详情页cart.js：购物车页面checkout.js：订单确认页面
在 index.js 中，我们可以简单地渲染一个欢迎信息：
export default function Home() {
return <h1>Welcome to my shop!</h1>;
}在 products.js 中，我们可以使用 getStaticProps 方法来获取商品列表数据，然后将其渲染到页面上：
-- -------------------- ---- -------
------ ------- -------- ---------- -------- -- -
------ -
----
----------------------- -- -
--- -----------------
----- ---------------------------------
----------------------
-------
-----
---
-----
--
-
------ ----- -------- ---------------- -
----- --- - ----- -------------------------------------
----- -------- - ----- -----------
------ -
------ -
---------
--
--
-在 products/[id].js 中，我们可以使用 getStaticPaths 方法来获取所有商品的 ID，然后使用 getStaticProps 方法来获取指定商品的数据，最后将其渲染到页面上：
-- -------------------- ---- -------
------ ------- -------- --------- ------- -- -
------ -
-----
------------------------
----------------------------
----------------------
------
--
-
------ ----- -------- ---------------- -
----- --- - ----- -------------------------------------
----- -------- - ----- -----------
----- ----- - ---------------------- -- --
------- - --- --------------------- --
----
------ - ------ --------- ----- --
-
------ ----- -------- ---------------- ------ -- -
----- --- - ----- --------------------------------------------------
----- ------- - ----- -----------
------ - ------ - ------- - --
-在 cart.js 中，我们可以使用一个简单的表格来显示购物车中的商品列表：
-- -------------------- ---- -------
------ ------- -------- ------ ---- -- -
------ -
-------
-------
----
--------------
--------------
-----------------
-----
--------
-------
---------------- -- -
--- --------------
---------------------
---------------------
------------------------
-----
---
--------
--------
--
-在 checkout.js 中，我们可以使用一个简单的表单来收集用户的订单信息：
-- -------------------- ---- -------
------ ------- -------- ---------- -
----- ---------- ------------ - ---------- ----- --- ------ --- -------- -- ---
----- ------------ - ------- -- -
-----------------------
----------------------
--
----- ------------ - ------- -- -
------------- ------------ -------------------- ------------------ ---
--
------ -
----- ------------------------
-------
-----
------ ----------- ----------- --------------------- ----------------------- --
--------
-------
------
------ ------------ ------------ ---------------------- ----------------------- --
--------
-------
--------
------ ----------- -------------- ------------------------ ----------------------- --
--------
------- -----------------------------
-------
--
-数据管理
在我们的商城应用程序中，我们需要管理以下几个数据：
- 商品列表数据
- 购物车数据
- 订单数据
我们可以使用 Redux 来管理这些数据。首先，我们需要安装以下依赖项：
npm install redux react-redux redux-thunk
然后，我们可以在 store 目录下创建以下文件：
index.js：Redux store 的入口文件reducers.js：Redux reducers 的集合actions.js：Redux actions 的集合thunks.js：Redux thunks 的集合
在 reducers.js 中，我们可以使用 Redux Toolkit 来创建 reducers：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
----- ------------- - -------------
----- -----------
------------- ---
--------- -
------------ ------- ------- -- ---------------
--
---
----- --------- - -------------
----- -------
------------- ---
--------- -
-------- ------- ------- -- -
----- - -- - - ---------------
----- ---- - ----------------- -- ------- --- ----
-- ------ -
------------- -- --
- ---- -
------------ ------------------ --------- - ---
-
--
----------- ------- ------- -- -
----- - -- - - ---------------
----- ----- - ---------------------- -- ------- --- ----
-- ------ --- --- -
------------------- ---
-
--
---------- ------- -- -
----- - ---
--
--
---
------ ------- -
--------- ----------------------
----- ------------------
--
------ ----- - ----------- - - ----------------------
------ ----- - -------- ----------- --------- - - ------------------在 actions.js 中，我们可以创建 action creators：
-- -------------------- ---- ------- ------ - ------------ -------- ----------- --------- - ---- ------------- ------ ----- ------------- - -- -- ----- ---------- -- - ----- --- - ----- ------------------------------------- ----- -------- - ----- ----------- -------------------------------- -- ------ ----- --------- - ------ -- ---------- -- - ------------------------ -- ------ ----- -------------- - ------ -- ---------- -- - --------------------------- -- ------ ----- -------------- - -- -- ---------- -- - ---------------------- --
在 thunks.js 中，我们可以创建异步操作：
import { fetchProducts } from './actions';
export const initializeStore = () => async (dispatch) => {
await dispatch(fetchProducts());
};在 index.js 中，我们可以创建 Redux store 并将其传递给应用程序：
import { configureStore } from '@reduxjs/toolkit';
import reducers from './reducers';
const store = configureStore({ reducer: reducers });
export default store;在 pages/_app.js 中，我们可以使用 Provider 组件将 Redux store 传递给应用程序：
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ ----- ---- -----------
------ ------- -------- ------- ---------- --------- -- -
------ -
--------- --------------
---------- -------------- --
-----------
--
-现在，我们已经完成了对数据的管理。我们可以在页面中使用 Redux 来获取和更新数据。例如，在 products.js 中，我们可以使用 useSelector 钩子来获取商品列表数据：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ ------- -------- ---------- -
----- -------- - ------------------- -- ----------------
------ -
----
----------------------- -- -
--- -----------------
----- ---------------------------------
----------------------
-------
-----
---
-----
--
-在 cart.js 中，我们可以使用 useSelector 钩子来获取购物车数据，并使用 useDispatch 钩子来更新购物车数据：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - --------------- -------------- - ---- -------------------
------ ------- -------- ------ -
----- ---- - ------------------- -- ------------
----- -------- - --------------
----- ---------------- - ------ -- -
-------------------------------
--
----- --------------- - -- -- -
---------------------------
--
------ -
-----
-------
-------
----
--------------
--------------
-----------------
---------------
-----
--------
-------
---------------- -- -
--- --------------
---------------------
---------------------
------------------------
----
------- ----------- -- ---------------------------------------
-----
-----
---
--------
--------
------- ------------------------------- -------------
------
--
-总结
在本文中，我们介绍了如何基于 Next.js 实现一个简单的商城应用程序。我们探讨了页面结构、数据管理和页面渲染等方面的内容，并提供了示例代码。希望本文能够对你有所帮助，让你更好地理解 Next.js 和 Redux 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660a7b27d10417a222a13bc2